Guía de HTML Semántico: Estructura tu Web y Mejora tu SEO

Imagina que construyes una casa. No usarías el mismo material para las paredes, el techo y las ventanas, ¿verdad? Cada parte tiene una función. Con una página web pasa lo mismo. El HTML semántico consiste en usar la 'pieza' correcta para cada parte de tu web. En lugar de usar cajas genéricas (div) para todo, usamos etiquetas como header (el recibidor), main (las salas principales) y footer (los cimientos).

En esta guía, te convertirás en un 'arquitecto web' profesional. Aprenderás a usar las etiquetas semánticas más importantes para que tu sitio no solo se vea bien, sino que sea más sólido, fácil de encontrar para Google (SEO) y accesible para todos.

Diagrama que muestra la estructura de una página web con etiquetas semánticas como header, nav, article, aside y footer. — Figura 1: Estructura de una página web con etiquetas de *HTML Semántico*

Etiqueta header

En nuestra casa web, el header es la fachada y el recibidor. Es la zona superior que da la bienvenida a tus visitantes y, por lo general, contiene el logo, el título principal del sitio y el menú de navegación.

🤔 Pregunta Clave: Para saber si usarlo, pregúntate: ¿Este contenido es la cabecera de toda la página o de una sección principal como un artículo? Si la respuesta es sí, esta es tu etiqueta.

⚠️ Error Común: Confundir header con head. Recuerda siempre: el header es lo que el usuario VE en la parte superior de la página. El head es una sección invisible con metadatos para el navegador.

Código de ejemplo del Encabezado Principal (header)

<header>
  <img src="logo.png" alt="Logo de MielPura">
  <h1>MielPura E-commerce</h1>
</header>

Etiqueta nav

La etiqueta nav es el mapa o el GPS de tu casa web. Su única y exclusiva misión es guiar al usuario, presentando los enlaces de navegación más importantes para que pueda moverse con facilidad entre las diferentes "habitaciones" (secciones) del sitio.

🤔 Pregunta Clave: ¿Este grupo de enlaces es la navegación principal del sitio (ej. el menú de la cabecera) o una tabla de contenidos crucial? Si es así, nav es tu etiqueta.

Guía Rápida: Cuándo Usar nav

✅ Úsalo para:

El menú de navegación principal del sitio web.
Una tabla de contenidos al inicio de un artículo largo.
Enlaces de paginación (p. ej., "Página Anterior / Siguiente").

❌ Evítalo para:

La lista de enlaces a redes sociales en el pie de página.
Enlaces de políticas de privacidad o términos y condiciones.
Cualquier grupo de enlaces que no sea una forma de navegación primaria.

Código de ejemplo del Menú de Navegación (nav)

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/tienda">Tienda</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

Etiqueta main

Si tu página fuera una película, la etiqueta main sería el protagonista principal. Envuelve el contenido central y único; es la razón específica por la que un usuario visita esa página, ya sea un artículo, una lista de productos o un formulario de contacto.

📜 La Regla de Oro: Solo puede haber una etiqueta main por página. Piénsalo: una película solo tiene un protagonista. Esta regla asegura que el propósito de la página sea claro para los motores de búsqueda y las tecnologías de asistencia.

Elementos que deben quedar FUERA de main

❌ No incluyas aquí el contenido repetido:

Logos y menús de navegación (eso va en el header y nav).
Barras laterales con enlaces relacionados (eso es para el aside).
Información de copyright o enlaces generales del sitio (eso va en el footer).

Código de ejemplo del Contenido Principal (main)

<main>
  <h2>Nuestras Mieles Artesanales</h2>
  <p>Descubre la selección de productos de nuestras colmenas...</p></main>

Etiqueta article

Piensa en la etiqueta article como una pieza de Lego o una cápsula de contenido. Es una unidad completa y autónoma que tiene sentido por sí misma. Teóricamente, podrías tomarla y "plantarla" en cualquier otro sitio web sin que pierda su significado.

🔥 La Prueba de Fuego: Para saber si usarlo, hazte la pregunta definitiva: ¿Este contenido se podría distribuir de forma independiente en un lector de noticias (RSS)? Si la respuesta es un sí rotundo, has encontrado un article.

Ejemplos Perfectos para un article

✅ Usa article para:

Una entrada de un blog (como esta misma).
Un artículo de un periódico en línea.
Un comentario de un usuario en un foro.
La ficha de un producto en una tienda online.