El HTML5 semántico

El HTML5 semántico consiste en elegir etiquetas que describen la naturaleza del contenido (<article>, <nav>, <main>) en lugar de etiquetas genéricas (<div>, <span>) que no aportan ningún significado. Esta diferencia ayuda directamente a los motores y a las IA a aislar el contenido útil del resto de la página.

Por qué importa la semántica

Un <div> no dice nada sobre su contenido: puede contener tanto el texto principal de un artículo como un bloque publicitario o un menú de navegación. Una etiqueta semántica, en cambio, aporta información explícita sobre el papel del bloque que envuelve. Para una máquina que debe decidir qué parte de una página constituye el contenido principal que hay que indexar o citar, esta información es directamente aprovechable, sin tener que adivinarla a partir de heurísticas inciertas (posición, clase CSS, cantidad de texto).

Antes de la introducción de HTML5, los desarrolladores ya utilizaban convenciones de nomenclatura para dar sentido a sus etiquetas (<div class="header">, <div class="nav">), pero estas clases CSS no tienen ningún valor semántico estandarizado: un motor no puede saber con certeza que una clase llamada «header» corresponde realmente a un encabezado, ya que cualquier desarrollador puede nombrar sus clases como quiera. Las etiquetas HTML5 semánticas, en cambio, forman un vocabulario común y sin ambigüedad, interpretado de la misma manera por todos los sistemas que leen HTML.

Las etiquetas semánticas clave

<body>
  <header>
    <nav><!-- menú principal --></nav>
  </header>

  <main>
    <article>
      <h1>Título del artículo</h1>
      <section>
        <h2>Primera parte</h2>
        <p>...</p>
      </section>
      <section>
        <h2>Segunda parte</h2>
        <p>...</p>
      </section>
    </article>
    <aside><!-- contenido relacionado, no esencial --></aside>
  </main>

  <footer><!-- enlaces de pie de página, avisos legales --></footer>
</body>

<header>: encabezado de página o de sección (no necesariamente la parte visual superior de la página).
<nav>: bloque de enlaces de navegación.
<main>: contenido principal único de la página; una sola etiqueta <main> por página.
<article>: contenido autónomo, que tendría sentido incluso aislado del resto de la página (una entrada de blog, una ficha de producto).
<section>: agrupación temática dentro de un artículo o una página; debe usarse solo cuando la sección tiene su propio título lógico (generalmente un Hn), no como simple división visual.
<aside>: contenido relacionado pero no esencial (enlaces asociados, recuadro publicitario).
<footer>: pie de página o de sección.

Aislar el contenido útil del ruido

Una página web rara vez contiene solo contenido principal: el menú de navegación, el aviso de cookies, los recuadros publicitarios y el footer con enlaces legales y redes sociales suelen ocupar una parte importante del HTML. Sin estructuración semántica, una máquina debe adivinar qué proporción del texto extraído es realmente relevante. Un marcado correcto con <nav>, <aside> y <footer> claramente separados del <main> y del <article> reduce este ruido y concentra la atención en el contenido que realmente importa, una cuestión directamente ligada a la forma en que un motor lee su página.

En algunos sitios, el contenido de navegación y los recuadros periféricos representan una parte del HTML mayor que el propio contenido principal, especialmente en páginas cortas. En ese caso, una estructuración semántica precisa se vuelve aún más determinante para que una máquina no sobrevalore ese ruido frente al texto que realmente importa.

Errores frecuentes

Codificarlo todo en <div> con clases CSS, sin ninguna etiqueta semántica, una elección todavía habitual en sitios generados por algunos creadores visuales.
Usar varias etiquetas <main> en una misma página.
Colocar el contenido editorial principal dentro de un <aside> por error de estructura.
Usar <section> como simple contenedor de estilo sin una agrupación temática real.
Anidar un <article> dentro de un <nav> o un <aside>, lo que contradice la propia lógica de estas etiquetas.

Un beneficio que va más allá del SEO

El HTML5 semántico también mejora la accesibilidad: los lectores de pantalla se apoyan en estas mismas etiquetas para permitir que un usuario con discapacidad visual navegue directamente hasta el contenido principal, sin tener que recorrer el menú en cada página. Un mismo esfuerzo de estructuración sirve así simultáneamente a la accesibilidad, al SEO clásico y al GEO.

Migrar un sitio existente a una estructura semántica

Reestructurar un sitio ya construido con <div> genéricos no exige necesariamente una renovación completa. En la mayoría de los casos, se trata de sustituir las etiquetas contenedoras existentes por su equivalente semántico (<div class="main-content"> se convierte en <main>, <div class="site-footer"> se convierte en <footer>) sin tocar el CSS que ya apunta a estos elementos por su clase. Esta migración progresiva, plantilla por plantilla, permite mejorar la estructura sin arriesgarse a romper el diseño visual existente: un proyecto realista incluso en un sitio ya en producción.

Para profundizar en lo que permite esta estructuración una vez extraído el texto, la lección sobre el chunking explica cómo un LLM divide después este contenido en bloques utilizables, y la lección sobre los datos estructurados Schema.org muestra cómo ir aún más lejos en la claridad de la información transmitida.