Semántica y estructura de página

HTML5 introdujo un conjunto de elementos que describen la función de cada región de la página, no solo su posición visual. <header>, <nav>, <main>, <footer>, <aside>, <section> y <article> son landmarks — puntos de referencia que los lectores de pantalla usan para permitir que los usuarios naveguen por la página saltando directamente a la región que les interesa, sin tener que escuchar todo el contenido de arriba a abajo.

La motivación es real: antes de HTML5, una página típica era un ensamblado de <div> con clases como class="header", class="sidebar", class="footer". Los navegadores y tecnologías asistivas no podían inferir qué rol tenía cada <div> — solo veían contenedores genéricos. Los elementos semánticos de HTML5 trasladaron esa información del atributo class (que es CSS, no HTML) al nombre del elemento mismo. El rol queda codificado en el markup, no en una convención de nombres.

Adoptar HTML semántico no es solo un gesto de accesibilidad — es también una señal de calidad de código. Un árbol DOM con landmarks correctos es legible para cualquier herramienta: navegadores, motores de búsqueda, scrapers, pruebas automatizadas, y lectores de pantalla. La alternativa, el llamado div soup, es un árbol de contenedores genéricos anidados sin información estructural.

Cómo funciona

Landmarks de estructura

Cada landmark tiene un rol semántico preciso:

<header> — cabecera de la página o de una sección. En el nivel de página, suele contener logo, título y navegación principal. Puede haber múltiples <header> en una página (uno en <main>, otro en un <article>), pero cada uno es la cabecera de su sección padre, no de la página completa.
<nav> — bloque de links de navegación. No todos los grupos de links son <nav> — solo los que constituyen una navegación principal o secundaria.
<main> — contenido principal de la página. Solo puede haber uno por página. No debe contener contenido que se repita en otras páginas (logo, nav global, footer).
<footer> — pie de la página o de una sección. Típicamente contiene links secundarios, copyright, información de contacto.
<aside> — contenido relacionado pero tangencial al contenido principal. Una barra lateral con artículos relacionados, una cita destacada, un anuncio.
<section> — región temática de contenido, identificada por un heading (<h2>, <h3>, etc.). Agrupa contenido por tema, no por estilo.
<article> — contenido autónomo que tiene sentido por sí mismo y que podría distribuirse independientemente: una nota de blog, una noticia, un comentario de usuario, una tarjeta de producto.

Contenedores genéricos

<div> y <span> no tienen ningún significado semántico. Son contenedores puros: <div> a nivel de bloque, <span> a nivel inline. Su único propósito es agrupar elementos para aplicarles estilos CSS o manipularlos con JavaScript. Cuando ningún elemento semántico encaja, <div> o <span> son la respuesta correcta.

Cuándo usar qué

Necesidad	Elemento correcto	Error común
Cabecera de la página	`<header>`	`<div class="header">`
Navegación principal	`<nav>`	`<div class="nav">` o `<ul>` sin envolver
Contenido principal	`<main>`	`<div id="main">`
Región temática	`<section>` (con heading)	`<div class="section">`
Contenido reutilizable/autónomo	`<article>`	`<div class="card">`
Contenido lateral relacionado	`<aside>`	`<div class="sidebar">`
Pie de página	`<footer>`	`<div class="footer">`
Agrupación sin semántica propia	`<div>` / `<span>`	Usar un elemento semántico que no aplica

`article` vs `section`

La confusión más frecuente: <article> es para contenido autónomo (se puede copiar y pegar en otro contexto y sigue teniendo sentido), <section> es para una región temática de la página actual (sin contexto, no tiene sentido aislado). Una tarjeta de producto en un catálogo es un <article>. Las pestañas de una ficha de producto son <section>.

El antipatrón `div soup`

<!-- ❌ Div soup: sin estructura semántica -->
<div class="wrapper">
  <div class="header"><div class="logo">…</div></div>
  <div class="content">
    <div class="main">…</div>
    <div class="sidebar">…</div>
  </div>
  <div class="footer">…</div>
</div>

<!-- ✅ Con landmarks HTML5 -->
<body>
  <header>…</header>
  <main>…</main>
  <aside>…</aside>
  <footer>…</footer>
</body>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Inicio</a></li>
        <li><a href="/referencia/">Referencia</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Flexbox</h1>
      <p>Sistema de layout unidimensional…</p>
    </article>
  </main>

  <aside>
    <h2>Ver también</h2>
    <ul>…</ul>
  </aside>

  <footer>
    <p>© 2026 Frontend Classroom</p>
  </footer>
</body>