HTML Semántico: Mejora la Estructura de tus Páginas Web

Cuando creamos una página web, queremos que sea clara, accesible y fácil de entender tanto para los usuarios como para los motores de búsqueda. Es aquí donde entra en juego el HTML semántico.

En este artículo, aprenderás qué es HTML semántico, por qué es importante y cómo implementarlo en tus proyectos.

¿Qué es HTML semántico?

El HTML semántico se refiere al uso de etiquetas de HTML que describen claramente el propósito de su contenido. A diferencia de las etiquetas genéricas como <div> o <span>, las etiquetas semánticas como <header>, <article> o <footer> proporcionan significado adicional al contenido que contienen.

Por ejemplo:

<div id="encabezado">
  <h1>Bienvenido a mi blog</h1>
</div>

<header>
  <h1>Bienvenido a mi blog</h1>
</header>

¿Por qué usar HTML semántico?

1.	Mejora la accesibilidad: Las tecnologías de asistencia, como los lectores de pantalla, pueden interpretar mejor el contenido, facilitando la navegación para usuarios con discapacidades.
2.	SEO optimizado: Los motores de búsqueda entienden mejor la estructura de tu página, lo que puede mejorar tu posicionamiento en los resultados.
3.	Código más claro: Facilita la lectura y el mantenimiento del código, tanto para ti como para otros desarrolladores.

Principales etiquetas semánticas

A continuación, una lista de etiquetas semánticas clave y su propósito: •

•	<nav>: Indica un conjunto de enlaces de navegación.

•	<main>: Contiene el contenido principal de la página.

•	<article>: Representa un contenido independiente, como un artículo o una entrada de blog.

•	<section>: Agrupa contenido relacionado dentro de una página.

•	<footer>: Define el pie de página de una página o sección.