¿Qué es el html semántico?

HTML semántico se refiere a la práctica de usar elementos HTML con significado semántico específico para ayudar a describir el contenido de una página web de manera más clara y estructurada.

En lugar de simplemente usar divs y spans para dar formato y diseño a una página, HTML semántico utiliza etiquetas HTML específicas, como <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, entre otras, para identificar claramente el propósito y la función de cada sección del contenido de la página.

El HTML semántico se ha vuelto más relevante a partir de la aparición de HTML5, alrededor del 2014.

Ventajas de usar HTML semántico:

  1. Código más claro y fácil de entender, ya que usamos una etiqueta específica acorde al tipo de contenido que estamos colocando, esto nos da mayor estructura lo que facilita el entendimiento de nuestro código.
  2. Mejora la accesibilidad del sitio, al facilitar el trabajo de los lectores de pantalla.
  3. Mejora el SEO, al facilitar la lectura de nuestro sitio web por los motores de búsqueda.

Etiquetas semánticas de HTML

A continuación se presentan algunas de las principales etiquetas semánticas en HTML:

  • <header>: Define la sección de encabezado de una página o sección.
  • <nav>: Define un conjunto de enlaces de navegación en una página.
  • <main>: Define la sección principal de una página.
  • <section>: Define una sección temática en una página.
  • <article>: Define un contenido independiente y completo en una página, como un artículo de noticias.
  • <aside>: Define contenido secundario o complementario en una página.
  • <footer>: Define la sección de pie de página de una página o sección.
  • <figure>: Define contenido multimedia, como una imagen, gráfico o diagrama, y su leyenda.
  • <figcaption>: Define la leyenda de una figura.

Aquí hay algunas etiquetas semánticas adicionales en HTML:

  • <address>: Define la información de contacto del autor o propietario de una página.
  • <time>: Define una fecha y hora específicas.
  • <mark>: Resalta el texto dentro de un elemento.
  • <progress>: Muestra el progreso de una tarea en una barra de progreso.
  • <meter>: Muestra una medida escalar en una barra.
  • <details>: Define detalles adicionales o información adicional que se puede mostrar u ocultar en una página.
  • <summary>: Define un título o resumen para un elemento <details>.
  • <dialog>: Define una ventana emergente o cuadro de diálogo en una página.
  • <blockquote>: Define una cita larga de otro origen.
  • <cite>: Define el título de una obra citada en un texto.
  • <abbr>: Define una abreviatura o sigla.
  • <code>: Define código de programación o de computadora.