¿Qué son los elementos semánticos en HTML y para qué…

Los elementos semánticos en HTML son etiquetas (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), que describen el propósito semántico del contenido que envuelven, no solo su apariencia.

Propósito principal:

Accesibilidad: Ayudan a las tecnologías de asistencia (lectores de pantalla) a entender la estructura y el contenido de la página, haciendo que el contenido sea accesible para usuarios con discapacidades.
SEO (Optimización para Motores de Búsqueda): Los motores de búsqueda indexan y clasifican mejor las páginas con marcado semántico, ya que pueden determinar con mayor precisión el contenido principal y su relevancia para las consultas.
Desarrollo y mantenimiento: Mejoran la legibilidad y mantenibilidad del código, haciendo que la estructura de la página sea más comprensible para otros desarrolladores (y para ti mismo en el futuro).
Mejor comprensión de la estructura: Permiten dividir claramente los bloques lógicos de la página (navegación, contenido principal, pie de página, etc.).

Ejemplo de marcado no semántico:

<div>
  <h2>Título del artículo</h2>
  <p>Contenido del artículo...</p>
</div>
<div>
  <h3>Barra lateral</h3>
  <p>Información de la barra lateral...</p>
</div>

Ejemplo de marcado semántico:

<article>
  <h2>Título del artículo</h2>
  <p>Contenido del artículo...</p>
</article>
<aside>
  <h3>Barra lateral</h3>
  <p>Información de la barra lateral...</p>
</aside>

El uso de elementos semánticos contribuye a crear páginas web más estructuradas, accesibles y optimizadas para los motores de búsqueda.

¿Qué son los elementos semánticos en HTML y para qué sirven?