Semántica: header, nav, main y por qué importa

Dos páginas pueden verse idénticas y valer completamente distinto: una está construida con etiquetas que DESCRIBEN su contenido y la otra es una sopa de <div>. Google, los lectores de pantalla y cualquier desarrollador que herede tu código notan la diferencia al instante. Hoy aprendes a construir del lado correcto.

Las 7 regiones de una página

<header>
<img src="img/logo.svg" alt="Logo de Mi Sitio" width="40" height="40">
<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="blog.html">Blog</a></li>
  </ul>
</nav>
</header>

<main>
<article>
  <h1>Título del artículo</h1>
  <p>El contenido principal y único de ESTA página.</p>
</article>

<aside>
  <h2>Artículos relacionados</h2>
</aside>
</main>

<footer>
<p>© 2026 Mi Sitio</p>
</footer>

• <header>: la franja superior — logo, navegación, buscador.
• <nav>: agrupa los enlaces de navegación principales.
• <main>: EL contenido de la página. Uno solo por página, siempre.
• <section>: una sección temática con su propio título.
• <article>: contenido autocontenido que tendría sentido por sí solo en otro lugar (una noticia, un post, una tarjeta de producto).
• <aside>: contenido relacionado pero secundario (barra lateral, "ver también").
• <footer>: el cierre — créditos, enlaces legales, contacto.

¿Y entonces el div qué?

<div> es un contenedor SIN significado. No está prohibido — lo usarás muchísimo para agrupar cosas por razones de estilo (CSS) — pero nunca debe reemplazar a una etiqueta que sí comunica algo.

Por qué te conviene (más allá de "es lo correcto")

1. SEO: Google pondera mejor el contenido dentro de main y article, y entiende la estructura de tu sitio sin adivinar.
2. Accesibilidad: un usuario de lector de pantalla puede saltar directamente a main o recorrer los nav sin escuchar toda la página. Con divs, esa navegación no existe.
3. Tu yo del futuro: <header> se explica solo; <div class="cont-sup-2"> no.

<header>HEADER — logo y nav</header>
<main>
<article>MAIN &gt; ARTICLE — el contenido que importa</article>
<aside>ASIDE — lo secundario</aside>
</main>
<footer>FOOTER — el cierre</footer>

body { font-family: system-ui; padding: 16px; color: #1e293b; display: grid; gap: 8px; }
header, footer { background: #ede9fe; padding: 16px; border-radius: 8px; }
main { display: grid; gap: 8px; grid-template-columns: 2fr 1fr; }
article { background: #ddd6fe; padding: 24px; border-radius: 8px; }
aside { background: #f1f5f9; padding: 24px; border-radius: 8px; }

Mini-reto

Abre un sitio grande (un periódico real) con DevTools y busca en Elements las etiquetas header, nav, main y footer. Encontrarlas en producción te confirma que esto no es teoría de curso: es como se construye la web profesional.

Qué sigue

Con la estructura clara, vamos a los datos tabulares: tablas bien hechas — una etiqueta con mala fama que usada correctamente es imbatible.