Por qué el HTML semántico es crítico para los LLMs
El HTML semántico siempre fue importante para accesibilidad. Lo que ha cambiado es que ahora los agentes de IA —ChatGPT con web search, Claude, Perplexity— dependen de esa misma estructura para entender qué hace cada elemento de tu página.
El paper VisualWebArena de ACL 2024 demostró que los agentes multimodales tienen limitaciones significativas procesando interfaces visuales. Muchos operan en “modo lectura”: solo texto y HTML, sin CSS ni JavaScript. Si tu HTML no tiene sentido sin estilos, los agentes no entienden tu página.
Esto no es teoría. En e-commerce internacional he visto cómo sitios con HTML semántico correcto tienen mejor representación en las respuestas de LLMs que competidores con mejor contenido pero peor estructura.
Las tres capas que importan
Para entender por qué la semántica es crítica, hay que pensar en cómo procesan tu página:
- Layout Tree: Lo que se pinta visualmente
- Árbol de Accesibilidad: Roles, nombres accesibles, relaciones entre elementos
- Extracción de contenido: El resumen estructurado que alimenta al modelo
Los agentes de IA combinan las tres. Si tu botón de “Añadir al carrito” es un <div onclick="..."> en lugar de un <button>, el árbol de accesibilidad no lo reconoce como interactivo, y el agente no sabe que puede hacer clic ahí.
Impacto real: semántico vs no semántico
| Elemento | HTML no semántico | HTML semántico | Impacto en IA |
|---|---|---|---|
| Botón | <div onclick=""> | <button> | Agente no detecta interactividad |
| Lista | <div><div>...</div></div> | <ul><li>...</li></ul> | Pierde relación entre items |
| Navegación | <div class="nav"> | <nav> | No identifica menú principal |
| Contenido | <div class="content"> | <main> | No distingue contenido principal |
| Encabezado | <div class="title"> | <h1> | Pierde jerarquía de información |
Los agentes de IA procesan el DOM, no el CSS. Un <div> con class="button" es un <div>, no un botón.
Errores que veo constantemente en e-commerce
Encabezados desordenados
<!-- Mal -->
<h1>Tienda</h1>
<h3>Categoría Zapatos</h3> <!-- ¿Dónde está el H2? -->
<h2>Producto destacado</h2>
<!-- Bien -->
<h1>Tienda</h1>
<h2>Categoría Zapatos</h2>
<h3>Producto destacado</h3>El orden de encabezados no es estético, es estructural. Los agentes usan la jerarquía H1→H2→H3 para entender qué secciones contienen qué. Saltar niveles rompe esa comprensión.
Listas que no son listas
<!-- Mal -->
<div class="features">
<div>Envío gratis</div>
<div>Devolución 30 días</div>
<div>Garantía 2 años</div>
</div>
<!-- Bien -->
<ul class="features">
<li>Envío gratis</li>
<li>Devolución 30 días</li>
<li>Garantía 2 años</li>
</ul>Un lector de pantalla anuncia “lista de 3 elementos” antes de leer el contenido. Un agente entiende que son items relacionados del mismo nivel. Un div con divs es… nada.
Imágenes sin contexto
<!-- Mal -->
<img src="zapato-nike.webp">
<!-- Regular -->
<img src="zapato-nike.webp" alt="Zapato Nike">
<!-- Bien -->
<img src="zapato-nike.webp"
alt="Nike Air Max 90 en color blanco, vista lateral derecha">El alt text no es solo para SEO de imágenes. Es la única forma que tiene un agente de IA de “ver” tu producto sin procesar la imagen. En e-commerce, un buen alt puede ser la diferencia entre que el agente recomiende tu producto o no.
Cómo auditar tu HTML semántico
La forma más rápida: abre DevTools (F12), ve a la pestaña “Accessibility” y revisa el árbol de accesibilidad. Deberías ver:
- Encabezados en orden jerárquico
- Botones identificados como
role="button" - Links identificados como
role="link" - Listas con sus items
- Imágenes con nombres accesibles
También recomiendo:
- Lighthouse: Auditoría automática de accesibilidad
- axe DevTools: Extensión más detallada para issues específicos
- Wave: Visualización de la estructura semántica
El test del “sin CSS”
Prueba tu página desactivando CSS. En Chrome: DevTools → More Tools → CSS Overview → Capture Overview, o simplemente usa document.querySelectorAll('style, link[rel="stylesheet"]').forEach(el => el.remove()) en la consola.
Si tu página sigue siendo navegable y comprensible, tu HTML semántico está bien. Si es un caos ilegible, los agentes de IA están viendo exactamente eso.
Landmarks y regiones
HTML5 introdujo elementos semánticos que definen regiones de la página:
<header> <!-- Cabecera del sitio -->
<nav> <!-- Navegación principal -->
<main> <!-- Contenido principal -->
<aside> <!-- Contenido secundario -->
<footer> <!-- Pie de página -->
<article> <!-- Contenido independiente -->
<section> <!-- Sección temática -->Los agentes usan estos landmarks para entender la arquitectura de tu página. Si todo tu contenido está en <div>s, el agente no sabe dónde está el contenido principal vs la navegación vs el footer.
ARIA: Cuando el HTML no alcanza
A veces el HTML semántico no cubre casos específicos. Para eso existe ARIA:
<!-- Tabs personalizados -->
<div role="tablist">
<button role="tab" aria-selected="true">Descripción</button>
<button role="tab" aria-selected="false">Especificaciones</button>
</div>
<!-- Carrito con contador -->
<button aria-label="Carrito de compra, 3 productos">
<svg>...</svg>
<span>3</span>
</button>La primera regla de ARIA: si puedes usar HTML semántico nativo, úsalo. ARIA es para cuando no hay alternativa.
La conexión con WCAG y la Ley Europea de Accesibilidad
La Ley Europea de Accesibilidad obliga a cumplir con WCAG 2.1 nivel AA desde 2025. Pero más allá del cumplimiento legal, hay un beneficio SEO directo: una web accesible es más fácil de rastrear e indexar.
Google lo confirma en su guía de buenas prácticas: la estructura semántica ayuda a Googlebot a entender el contenido. Lo mismo aplica para los sistemas RAG (Retrieval Augmented Generation) que usan los LLMs para extraer datos de tu web.
Herramientas de auditoría
| Herramienta | Tipo | Uso principal |
|---|---|---|
| Lighthouse | Integrada Chrome | Auditoría automática rápida |
| axe DevTools | Extensión | Issues específicos y detallados |
| Wave | Extensión/Web | Visualización de estructura |
| HTML Validator W3C | Web | Validación de sintaxis |
| Pa11y | CLI | Integración en CI/CD |
El tiempo invertido en HTML semántico se paga en tres frentes: accesibilidad, SEO tradicional, y ahora visibilidad en LLMs. No hay excusa para no hacerlo bien.