El uso de etiquetas semánticas en HTML es una de las mejores prácticas en el desarrollo web que ayuda a dar sentido y contexto al contenido de una página web. Las etiquetas semánticas describen el tipo de contenido que contienen, lo que facilita la interpretación del contenido de la página tanto por parte de los navegadores y motores de búsqueda como de las tecnologías de asistencia, como los lectores de pantalla.

¿Qué son las etiquetas semánticas?

En lugar de depender únicamente de etiquetas no semánticas generales, como <div> y <span>, que no proporcionan información sobre su contenido, las etiquetas semánticas aportan un nivel adicional de información que describe el tipo de contenido que envuelven.

Por ejemplo, la etiqueta <header> se utiliza para contener contenido introductorio o de navegación, <nav> se utiliza para contener bloques de navegación, <main> para el contenido principal de un documento, <article> para un bloque de contenido independiente, <section> para agrupar contenido relacionado, <aside> para contenido aparte del contenido principal, <footer> para información del pie de página, entre otros.

Estas etiquetas permiten que los navegadores, los motores de búsqueda y las tecnologías de asistencia interpreten correctamente el contenido y proporcionen a los usuarios una mejor experiencia. Por ejemplo, un lector de pantalla puede usar estas etiquetas para ayudar a un usuario con discapacidad visual a navegar por una página, saltando de una sección a otra o ignorando secciones que no son de interés.

Las etiquetas semánticas también son esenciales para la optimización de motores de búsqueda (SEO). Los motores de búsqueda utilizan estas etiquetas para entender mejor la estructura y el contenido de una página web, lo que puede influir en la clasificación de la página en los resultados de búsqueda.

Es importante destacar que el uso de etiquetas semánticas HTML no es sólo una cuestión de accesibilidad y SEO, sino también de mantenimiento y eficiencia en el desarrollo. Un código bien estructurado y semánticamente correcto es más fácil de leer, entender y mantener, tanto para los desarrolladores actuales como para los futuros.

Cómo usar las etiquetas semánticas

<header>:

Esta etiqueta se utiliza para contener el encabezado de un documento o una sección. Esto puede incluir cosas como el logotipo del sitio, el título del sitio y la barra de navegación principal.

<header>
  <h1>Título de la página</h1>
  <nav>
    <!-- Barra de navegación aquí -->
  </nav>
</header>

<nav>

Esta etiqueta se utiliza para contener bloques de navegación, normalmente enlaces a otras partes del sitio.

<nav>
  <ul>
    <li><a href="#home">Inicio</a></li>
    <li><a href="#about">Acerca de</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

<main>

Esta etiqueta se utiliza para el contenido principal de un documento. Debería ser único al documento y excluir información que se repita en un conjunto de documentos como información de sitio, pies de página, logos, etc.

<main>
  <article>
    <!-- Contenido principal del artículo aquí -->
  </article>
</main>

<article>

Esta etiqueta se utiliza para contener un bloque de contenido independiente que debería tener sentido por sí mismo, como una entrada de blog o una noticia.

<article>
  <h2>Título del artículo</h2>
  <p>Contenido del artículo...</p>
</article>

<section>

Esta etiqueta se utiliza para agrupar contenido relacionado. Cada <section> debería estar identificada, normalmente incluyendo un encabezado (<h1>-<h6>) como hijo de <section>.

<section>
  <h2>Título de la sección</h2>
  <p>Contenido de la sección...</p>
</section>

<aside>

Esta etiqueta se utiliza para contener contenido relacionado con el contenido principal, pero que puede ser considerado separado del contenido principal, como barras laterales, inserciones publicitarias o notas al pie.

<aside>
  <h3>Título de la nota al margen</h3>
  <p>Contenido de la nota al margen...</p>
</aside>

<footer>

Esta etiqueta se utiliza para contener información del pie de página, como información del autor, datos de copyright, enlaces a políticas de privacidad, etc.

<footer>
  <p>Transmediarte © 2023. Todos los derechos reservados.</p>
</footer>

<figure> y <figcaption>

Estas etiquetas se utilizan para marcar contenido multimedia, como imágenes o videos, junto con una descripción. <figure> envuelve el contenido multimedia y <figcaption> proporciona una descripción textual del mismo.

<figure>
  <img src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen" />
  <figcaption>Esta es una imagen que muestra un hermoso paisaje.</figcaption>
</figure>

En resumen

En conclusión, el uso adecuado de las etiquetas semánticas en HTML no solo es importante para estructurar correctamente el contenido de un artículo de blog, sino que también juega un papel fundamental en la accesibilidad y la experiencia del usuario (UX).

Al utilizar etiquetas semánticas como <article>, <header>, <section>, <aside>, <nav>, <main>, <figure>, y <footer>, estamos brindando una estructura clara y significativa al contenido. Esto ayuda a los usuarios, incluyendo aquellos con discapacidades y tecnologías de asistencia, a comprender la información y navegar por ella de manera más eficiente.

Además, las etiquetas semánticas mejoran la accesibilidad al permitir que los lectores de pantalla y otros dispositivos accedan y presenten el contenido correctamente. Esto es especialmente importante para personas con discapacidades visuales o cognitivas, que pueden depender de tecnologías de asistencia para interactuar con el contenido en línea.

La experiencia del usuario también se ve beneficiada por el uso de etiquetas semánticas. Una estructura bien organizada y comprensible facilita la navegación y la comprensión del contenido para todos los usuarios. Esto puede aumentar la retención de información, mejorar la usabilidad y generar una experiencia más agradable en general.

Por lo tanto, te animo a utilizar las etiquetas semánticas apropiadas para mejorar la accesibilidad y la experiencia del usuario. Al hacerlo, estarás creando un contenido más inclusivo y accesible para todos los visitantes de tu sitio web. Recuerda que la accesibilidad y la UX son aspectos fundamentales del diseño web responsable. Al implementar prácticas accesibles, no solo estás cumpliendo con los estándares y pautas, sino que también estás promoviendo un entorno en línea más inclusivo y accesible para todos los usuarios. ¡Juntos podemos crear una web más accesible y amigable para todos!