Semántica HTML: header, nav, main y footer

Nivel: Introductorio · HTML · Después de div/span · 12–14 minutos

Respuesta corta: las etiquetas semánticas describen el rol de cada zona de la página: <header> (cabecera), <nav> (navegación), <main> (contenido principal) y <footer> (pie). No son obligatorias para que «se vea», pero ayudan a personas, buscadores y lectores de pantalla a entender la estructura.

Si todo era div, la página era una caja sin etiquetas. Aquí analogía de edificio, tabla de regiones y mitos frecuentes.

Analogía: el edificio de la página

La recepción es el header (logo, título del sitio). El directorio de ascensores es el nav (menú). Las oficinas donde ocurre el trabajo son el main. El zócalo con datos legales es el footer. Podrías llamar a todo «habitación» (div), pero el plano semántico evita que te pierdas.

Regiones y ejemplos reales

<body>
  <header>
    <h1>Mi sitio</h1>
    <nav>
      <a href="/">Inicio</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>
  <main>
    <h2>Artículo</h2>
    <p>Contenido principal…</p>
  </main>
  <footer>
    <p>© 2026</p>
  </footer>
</body>

Ejemplos en la vida diaria del estudiante

• Wikipedia: menú lateral/superior = nav; artículo = main.
• Aula virtual: cabecera con logo; pie con soporte.
• Tu portafolio: header con nombre; main con proyectos; footer con email.

Mitos frecuentes

• «header solo arriba del todo.» También puede encabezar un article o sección.
• «Puedo tener varios main.» Un solo main por documento.
• «nav es obligatorio en el header.» Suele ir ahí, pero lo importante es que los enlaces de navegación estén en nav.

Mini-glosario

• Semántica: el significado de la etiqueta, no solo su aspecto.
• Landmark: región que los lectores de pantalla pueden saltar (main, nav…).
• Div soup: página hecha solo de divs sin roles claros.

Para seguir: enlaces internos y anclas — saltar dentro del mismo main.