HTML semántico: estructura con significado — HTML semántico, multimedia y tablas

De la "sopa de divs" a etiquetas con significado

Durante años, las páginas se construían apilando <div> para todo: la cabecera, el menú, el contenido, el pie... A esto se le llama, con cariño, la sopa de divs. El navegador la mostraba estupendamente, pero ni los lectores de pantalla ni los buscadores podían distinguir qué era cada cosa. Para una máquina, un <div class="nav"> no es un menú: es una caja anónima más en la sopa.

El HTML semántico te saca de ahí: usa etiquetas cuyo nombre describe su función. No cambian (casi) el aspecto en pantalla, pero sí aportan significado a la estructura. Y eso desbloquea dos cosas enormes: accesibilidad y SEO. Misma pinta, mucho más cerebro detrás.

Las regiones principales (landmarks)

Estas etiquetas definen landmarks: zonas que la tecnología de asistencia puede listar y a las que puede saltar directamente.

<body>
  <header>
    <h1>Mi revista</h1>
    <nav>
      <a href="/">Inicio</a>
      <a href="/articulos">Artículos</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Cómo cocinar pasta</h2>
      <p>Contenido del artículo...</p>
    </article>

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

  <footer>
    <p>© 2026 Mi revista</p>
  </footer>
</body>

<header>: la cabecera de la página (o de una sección). Suele llevar el logotipo, el título y la navegación principal.
<nav>: un bloque de navegación. Reservado para los menús importantes, no para cualquier grupo de enlaces.
<main>: el contenido principal y único de la página. Solo uno por página, y no debe contener cabeceras, pies ni barras laterales repetidas.
<footer>: el pie: créditos, avisos legales, enlaces secundarios.

Secciones de contenido

<article>: una pieza de contenido autónoma, que tendría sentido por sí sola (una noticia, una entrada de blog, un comentario, una ficha de producto). La prueba: ¿lo podrías sacar a un lector RSS y seguiría teniendo sentido?
<section>: una sección temática del documento, normalmente con su propio encabezado. Agrupa contenido relacionado que no es necesariamente autónomo.
<aside>: contenido tangencial o complementario al principal: una barra lateral, un recuadro de "sabías que...", publicidad relacionada.

Regla práctica: si dudas entre <section> y <div>, pregúntate si el bloque merece un encabezado propio. Si sí, probablemente sea una <section>. Si solo lo agrupas para colgarle un estilo, el <div> sigue siendo tu amigo: no todo tiene que ser semántico, pero sí lo que significa algo.

Pequeñas etiquetas semánticas en línea

<figure> y <figcaption>: agrupan un contenido ilustrativo (imagen, gráfico, fragmento de código) con su leyenda.

<figure>
  <img src="grafico.png" alt="Ventas por trimestre en 2025" />
  <figcaption>Figura 1. Las ventas crecieron un 12 %.</figcaption>
</figure>

<time>: marca una fecha u hora de forma legible para máquinas con el atributo datetime.

<p>Publicado el <time datetime="2026-06-22">22 de junio de 2026</time>.</p>

<mark>: resalta texto relevante en su contexto (por ejemplo, los términos buscados dentro de un resultado).

<p>El resultado contiene la palabra <mark>semántica</mark>.</p>

Por qué importa de verdad

Accesibilidad: quien usa un lector de pantalla puede pedir "lista de regiones" y saltar directo al <main> o al <nav>, sin tragarse la cabecera en cada página. La sopa de divs no ofrece ni uno de esos atajos.
SEO: los buscadores entienden mejor la jerarquía y la importancia del contenido. Un <article> con su <h2> y su <time> le grita a Google "esto es una noticia con fecha"; un <div> se queda callado.
Mantenibilidad: el código se lee como prosa. Dentro de seis meses, <nav> te dirá mucho más que <div class="menu-top-v2">.

⚠️ Trampa clásica: usar <div> para todo por costumbre. Antes de escribir uno, pregúntate si existe una etiqueta que ya diga lo que ese bloque es. Casi siempre, sí.