HTML semántico

Qué comprueba esta verificación

Escanea el DOM renderizado y cuenta elementos semánticos de HTML5 — <article>, <section>, <nav>, <header>, <footer>, <aside>, <main>, <figure>, <figcaption>, <time> — frente al total de elementos. Las páginas construidas casi enteramente con <div> y <span> anidados puntúan bajo; las que tienen un esqueleto semántico claro puntúan alto.

Por qué importa

El HTML semántico es la diferencia entre markup que una máquina puede parsear y markup que una máquina puede entender. Un <div class="header"> es invisible para cualquiera que no lea tus clases CSS. Un <header> es inequívoco: todo navegador, lector de pantalla, crawler de búsqueda y agente LLM sabe qué papel juega ese bloque en la página.

Tres audiencias leen tu HTML:

• Agentes de IA (ChatGPT, Perplexity, los AI Overviews de Google) extraen y citan contenido. Tiran con fiabilidad de <article>, <main> y <time datetime>. Adivinan dentro de la sopa de divs.
• Lectores de pantalla generan un mapa de landmarks de la página para que los usuarios puedan saltar directamente a navegación, contenido principal o footer. Sin etiquetas semánticas, no hay landmarks. Empareja esta comprobación con regiones landmark ARIA.
• Buscadores ponderan el contenido dentro de <article> y <main> por encima del contenido en contenedores genéricos — e ignoran con fiabilidad el boilerplate dentro de <nav> y <footer>.

El arreglo es barato. El coste de no hacerlo compone en cada página del sitio.

Cómo arreglarlo

Sustituye los contenedores genéricos por el elemento que describe su papel.

Chrome de la página:

<!-- Before -->
<div class="site-header">
  <div class="nav">...</div>
</div>
<div class="main-content">...</div>
<div class="site-footer">...</div>

<!-- After -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Posts de blog y artículos: envuelve cada post en <article> y marca las fechas con <time datetime>. El atributo datetime es legible por máquinas y aparece en citas de IA y en la auto-extracción de Schema.org.

<article>
  <header>
    <h1>Post title</h1>
    <time datetime="2026-05-11">May 11, 2026</time>
  </header>
  <p>Post body...</p>
</article>

Imágenes con leyenda: usa <figure> + <figcaption> cuando la leyenda forme parte del contenido (no solo un tooltip al pasar).

<figure>
  <img src="chart.png" alt="Revenue growth 2024-2026" />
  <figcaption>Quarterly revenue, Q1 2024 through Q1 2026.</figcaption>
</figure>

Cuándo usar <section> vs <div>: usa <section> para una región con nombre de la página — una que tendría un encabezado en un outline (Precios, Características, FAQ). Usa <div> para agrupación puramente presentacional (un wrapper flex, el borde de una card). Si no puedes escribirle un encabezado de una línea, es un <div>.

Cruza el resultado con regiones landmark ARIA y texto descriptivo de enlaces — esas comprobaciones se refuerzan entre sí.

Preguntas frecuentes

¿Importa si uso <div role="main"> en lugar de <main>?

Para la accesibilidad son equivalentes — los dos exponen un landmark main. Para todos los demás (agentes de IA, crawlers, revisores de código), <main> es más claro y corto. Usa el elemento nativo. Los roles ARIA existen para parchear elementos que no pueden expresar su papel, no para reemplazar a los que sí pueden.

¿Puedo tener varios <header> y <footer> por página?

Sí. <header> y <footer> están scoped a su antecesor de sección más cercano (<article>, <section>, <main> o el documento). Un post de blog puede tener su propio <header> (título + fecha) dentro de <article>, más el <header> del sitio entero arriba de la página. <main> es la excepción — solo uno por documento.

Mi tema de CMS usa divs en todas partes. ¿Merece la pena reescribirlo?

Si controlas la plantilla, sí — es una edición puntual que mejora accesibilidad, SEO y extractabilidad por IA para cada página que la use. Si no (un tema alojado en Shopify/Squarespace), céntrate en el hueco de contenido donde sí tienes control: envuelve posts en <article>, marca fechas con <time>, usa <figure> para imágenes con leyenda. El chrome mejorará cuando el tema se actualice.