HTML5 semántico: estructura, accesibilidad WCAG y optimización para motores de búsqueda

¿Qué es el HTML5 semántico?

HTML5 es la quinta y actual versión principal del HyperText Markup Language (lenguaje de marcado de hipertexto), el estándar universal que define la estructura y el contenido de cualquier página de la World Wide Web.

El concepto de semántica en HTML se refiere al uso de etiquetas que aportan significado explícito tanto al desarrollador como al navegador web, a los lectores de pantalla para personas con discapacidad visual y a los rastreadores de los motores de búsqueda (como Googlebot). En lugar de estructurar una página exclusivamente mediante contenedores genéricos y carentes de significado como <div> y <span> (lo que se conoce comúnmente como div soup), el HTML5 semántico utiliza elementos con un propósito claro, como <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>.

---

¿Cuándo y quién lo creó?

• Año de creación de HTML: 1991, creado por Tim Berners-Lee en el CERN (Ginebra, Suiza).
• Nacimiento de HTML5: En 2004, después de que el consorcio oficial W3C decidiera abandonar inicialmente HTML para centrarse en XHTML (más rígido y basado en XML), un grupo de desarrolladores y fabricantes de navegadores (Apple, Mozilla y Opera) fundó el WHATWG (Web Hypertext Application Technology Working Group) para impulsar un estándar pragmático, tolerante a errores y orientado a aplicaciones web enriquecidas.
• Consenso y estandarización: En 2007, el W3C adoptó el trabajo del WHATWG como base para HTML5. El primer borrador público se publicó en 2008, y la especificación se convirtió oficialmente en Recomendación del W3C el 28 de octubre de 2014.
• Modelo actual Living Standard: Desde 2019, HTML se mantiene como un estándar vivo (Living Standard) sin versiones cerradas, según el acuerdo formal entre el W3C y WHATWG.

---

¿Para qué se utiliza?

El HTML5 semántico es la primera línea de defensa de la calidad de una aplicación web:

1. Accesibilidad universal (a11y): Los lectores de pantalla (NVDA, VoiceOver, JAWS) generan un árbol de accesibilidad a partir del HTML. Etiquetas como <button> (con soporte predeterminado para la navegación con teclado mediante Enter y Espacio) o <main> (que permite saltar directamente al contenido) son esenciales para cumplir la normativa europea de accesibilidad WCAG 2.1 nivel AA.
2. SEO e indexación orgánica: Los motores de búsqueda entienden la jerarquía de la información (<h1> a <h6>), la temática de un contenido (<article>) y qué partes son complementarias (<aside>, <footer>), lo que otorga más relevancia al contenido principal.
3. Mantenibilidad del código: Un documento bien estructurado reduce drásticamente la cantidad de clases CSS auxiliares necesarias y permite que cualquier miembro del equipo comprenda la estructura de inmediato.
4. Multimedia nativa: Integración de vídeo (<video>), audio (<audio>) y gráficos vectoriales interactivos (<canvas>, <svg>) sin necesidad de complementos propietarios (como el antiguo Adobe Flash).

---

Comparativa de arquitectura: semántica frente a genérica

<!-- Codi Antic / Genèric (div soup) -->
<div class="header">
  <div class="nav">
    <div class="link" onclick="anarInici()">Inici</div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="post-title">El meu article</div>
  </div>
</div>

<!-- Codi Modern HTML5 Semàntic -->
<header>
  <nav aria-label="Navegació principal">
    <a href="/">Inici</a>
  </nav>
</header>
<main id="main-content">
  <article>
    <h1>El meu article</h1>
  </article>
</main>

---

Elementos semánticos fundamentales y funcionalidad

Elemento HTML5	Rol semántico nativo	Uso adecuado
<header>	banner	Cabecera introductoria de una página o sección, a menudo con logotipo y navegación.
<nav>	navigation	Bloque de navegación que contiene los enlaces principales de la página o de otras secciones.
<main>	main	El contenido central y exclusivo de la página. Solo puede haber un <main> por documento.
<article>	article	Contenido independiente y autocontenido que podría distribuirse o reutilizarse por separado.
<section>	region	Agrupación temática de contenido, generalmente acompañada de un encabezado (<h2>-<h6>).
<aside>	complementary	Contenido complementario (barras laterales, tablas de contenidos, citas relacionadas).
<footer>	contentinfo	Pie de página con información de derechos de autor, términos legales y enlaces de contacto.

---

Nuestro compromiso con el estándar

En todos los proyectos de nuestra cartera, auditamos el código fuente con validadores del W3C y la herramienta Lighthouse para garantizar que el 100 % de la semántica sea correcta, sin depender de trucos de JavaScript para la navegación fundamental.