Descubriendo el HTML Semántico: Un Recorrido Práctico
HTML Semántico: Un Recorrido Práctico
El HTML semántico es una herramienta esencial en el desarrollo web que permite estructurar la información en una página web de manera legible. No se trata de un nuevo HTML ni de una variación de este, sino que usamos etiquetas que nos indican de forma clara la función que cumplen en relación con el contenido.
Por ejemplo, algunas de las etiquetas semánticas más comunes son:
<a> </a>: introduce hiperenlaces en el documento HTML.
<strong> </strong>: reconoce las palabras claves o información relevante.
<br>: introduce un salto del línea.
<mark> </mark>: resalta el texto.
<header>: Define la cabecera de un documento o una sección.
<nav>: Representa una sección de navegación.
<main>: Indica el contenido principal de un documento HTML.
<article>: Representa una pieza de contenido independiente y autónoma.
<section>: Define una sección temática de una página web.
<aside>: Se utiliza para el contenido relacionado o secundario.
<footer>: Representa el pie de página o de sección.
<figure> y <figcaption>: Se utilizan para incluir imágenes y su descripción asociada de manera semántica.
El uso de HTML semántico tiene varias ventajas. Permite una mejor accesibilidad y mejora el posicionamiento del sitio web. Además, facilita la adaptación de la página a diferentes dispositivos y tecnologías, como los lectores de pantalla para personas con discapacidades visuales.
En resumen, el HTML semántico es una práctica que mejora la legibilidad, la usabilidad y la accesibilidad de los sitios web, al tiempo que reduce la necesidad de datos estructurados. Es una forma de programar que permite crear sitios web más accesibles y más significativos para los motores de búsqueda.
Principales Etiquetas HTML5 y su Importancia para SEO
Las etiquetas HTML5 son fundamentales para el desarrollo web y el SEO. Permiten a los motores de búsqueda entender el contenido de una página web y determinar su relevancia para las consultas de búsqueda. Aquí te presento una tabla con algunas de las principales etiquetas HTML5 y su importancia:
Lista de etiquetas HTML
See the Pen Clase 1 by Paulo Galarza (Snippets) (@Paulo-Galarza-Snippets) on CodePen.
Este es un ejemplo básico y el contenido dentro de las etiquetas <p> debe ser reemplazado con información relevante. Recuerda que el HTML semántico es importante ya que mejora la accesibilidad, la navegabilidad del sitio web y ayuda con el SEO.
