El HTML semántico (lo que durante años hemos llamado HTML5) consiste en usar etiquetas que dicen qué es cada parte de la página: main, article, nav, header, footer. No es un factor de posicionamiento por sí mismo y no vas a subir en Google por cambiar un div por un section. Lo que sí consigues es una página más accesible, más fácil de procesar para cualquier máquina y más fácil de mantener.
Durante años se ha presentado el HTML5 como una de las claves del SEO, y conviene matizarlo. Aquí tienes qué etiquetas merece la pena cuidar, cuáles dan igual y cómo comprobar tu plantilla en un par de minutos.
Qué es el HTML semántico y para qué sirve
El HTML semántico es la forma de escribir el código de una página usando etiquetas que describen la función de cada bloque (cabecera, navegación, contenido principal, artículo, pie) en lugar de contenedores genéricos como div. Sirve para que navegadores, lectores de pantalla, buscadores y otros programas distingan las partes de la página sin tener que adivinarlas.
Antes de que se generalizara, las plantillas se montaban con cosas como <div id="header">, <div id="content"> o <div id="main">. Funcionaba, pero el nombre del bloque solo lo entendía quien había escrito la hoja de estilos.
Un apunte de vocabulario: «HTML5» ya no es una versión que vaya a tener un HTML6. El estándar actual es el HTML Living Standard, que se actualiza de forma continua. Aun así, mucha gente lo sigue buscando como «HTML5 SEO», y por eso mantengo el término.
Tampoco es un etiquetado pensado solo para los buscadores. Quien más lo aprovecha son las personas que navegan con lector de pantalla, que pueden saltar directamente al contenido principal o al menú gracias a estas etiquetas.
¿El HTML semántico mejora el posicionamiento en Google?
El HTML semántico no mejora el posicionamiento de forma directa. Según la guía de inicio de SEO de Google, el orden semántico de los encabezados es muy útil para los lectores de pantalla, pero a la Búsqueda de Google le da igual, porque la web en general no es HTML válido y rara vez puede apoyarse en esos significados.
Dicho de otra forma: Google ha aprendido a entender páginas mal construidas porque casi todas lo están. Todo lo que se repite mucho en la web, como los div id="content" de tantas plantillas, Google tiende a interpretarlo sin problema.
Entonces, ¿por qué dedicarle tiempo? Por los beneficios indirectos:
- Accesibilidad. Es el beneficio más claro y el único que nadie discute.
- Contenido principal bien delimitado. Un
mainy unarticleclaros separan el texto del menú, la barra lateral y el pie. Cualquier programa que quiera quedarse solo con el contenido lo tiene más fácil. - Código más limpio. Una plantilla ordenada da menos errores cuando se toca, y eso en un proyecto que dura años se nota.
En mi experiencia auditando webs desde 2008, nunca he visto que un proyecto despegue por pasar de div a etiquetas semánticas. Sí he visto plantillas tan desordenadas que costaba saber dónde empezaba el contenido, y ahí arreglar la estructura forma parte del trabajo técnico de base.
Si estás empezando y quieres saber qué pesa de verdad en el posicionamiento (contenido, enlaces, rastreo), lo tienes ordenado por lecciones en el curso de SEO básico.
Qué etiquetas de HTML5 importan y cuáles no para el SEO
Las etiquetas semánticas que más conviene cuidar son main y article, porque delimitan el contenido principal, y los encabezados h1 a h6, porque ordenan la lectura. header, nav, aside y footer marcan las zonas que se repiten en todo el sitio y ayudan sobre todo a la accesibilidad.
| Etiqueta | Para qué sirve | Error habitual | Efecto en SEO |
|---|---|---|---|
main | Contenido principal y único de la página | Meter dentro el menú o el pie, o tener varios visibles | Indirecto: separa el contenido del resto |
article | Pieza que se entiende por sí sola: un post, una ficha, una noticia | Usarlo para cualquier caja de diseño | Indirecto: delimita la pieza de contenido |
section | Bloque temático dentro de la página, normalmente con su encabezado | Usarlo como contenedor de estilo en lugar de div | Ninguno directo |
nav | Bloques de navegación importantes (menú principal, migas de pan) | Envolver con nav cualquier grupo de enlaces | Ninguno directo; los enlaces se rastrean igual |
aside | Contenido relacionado de forma tangencial: barra lateral, glosario, banners | Poner ahí contenido que sí es principal | Ninguno directo |
header | Cabecera del sitio o de un artículo: logo, menú, buscador, título | Confundirlo con head, que es otra cosa | Ninguno directo |
footer | Pie del sitio o de un artículo: copyright, contacto, enlaces legales | Llenarlo de enlaces con palabras clave | Ninguno directo |
figure y figcaption | Imagen, tabla o código con su pie explicativo | Pie de foto en un párrafo suelto | Indirecto: da contexto a la imagen |
time | Fechas legibles por máquinas con el atributo datetime | Fecha solo en texto | Ninguno directo |
main: el contenido principal de la página
La etiqueta main marca el contenido propio de esa URL, lo que no se repite en el resto del sitio. Solo debe haber un main visible por página y no puede ir dentro de article, aside, header, footer ni nav.
Durante un tiempo se recomendó escribir <main role="main"> porque no todos los navegadores reconocían la etiqueta. Ya no hace falta: según la referencia del elemento main en MDN Web Docs, está disponible en todos los navegadores desde julio de 2015. El atributo role="main" es redundante, aunque dejarlo no hace daño.
article y section: cuándo usar cada una (y cuándo un div)
Usa article cuando el bloque tendría sentido publicado por separado, como una entrada de blog, un comentario o una ficha de producto. Usa section para agrupar por temas un contenido más largo. Y si solo necesitas una caja para dar estilo, usa div.
Se suele decir que section «requiere un encabezado propio». Es una buena práctica, no una obligación. El estándar HTML del WHATWG define la sección como una agrupación temática «normalmente con un encabezado» y avisa de que section no es un contenedor genérico. La referencia de section en MDN lo resume bien: si es solo para estilos, div.
header, nav, aside y footer: lo que se repite en todo el sitio
Estas cuatro etiquetas marcan las zonas comunes a todas las páginas. Ayudan a los lectores de pantalla a saltar entre ellas y a cualquier programa a distinguirlas del contenido.
Es habitual leer que Google da poca importancia a lo que va dentro de nav o del pie. No hay documentación oficial que lo diga así. Mi criterio es este: los enlaces del menú y del pie se rastrean y cuentan como enlaces internos, y lo que importa es qué enlazas y con qué texto, no la etiqueta que los envuelve.
Además, el propio estándar indica que no todos los grupos de enlaces tienen que ir en un nav: está pensado para los bloques de navegación principales.
¿Tu plantilla está bien construida por dentro? Si no tienes claro cómo ven tu web los rastreadores, lo revisamos contigo dentro de un trabajo de SEO técnico y te decimos qué merece la pena tocar.
Ejemplo de un post de blog con HTML semántico
Una plantilla de post bien marcada tiene un header con el menú dentro de nav, un único main que contiene el article con su h1, un aside para lo relacionado y un footer. Con eso basta: no hace falta envolver cada párrafo en una etiqueta especial.
Así suele verse una plantilla hecha solo con div:
<div id="header">
<div class="menu">...</div>
</div>
<div id="content">
<div class="post">
<div class="title">Título del post</div>
<div class="text">...</div>
</div>
<div class="sidebar">...</div>
</div>
<div id="footer">...</div>Y así la misma página con etiquetas semánticas:
<header>
<nav aria-label="Principal">...</nav>
</header>
<main>
<article>
<h1>Título del post</h1>
<p>Publicado el <time datetime="2026-10-12">12 de octubre de 2026</time></p>
<h2>Primer apartado</h2>
<p>...</p>
<figure>
<img src="imagen.png" alt="Descripción de la imagen">
<figcaption>Pie de la imagen</figcaption>
</figure>
</article>
<aside>Artículos relacionados</aside>
</main>
<footer>...</footer>Fíjate en el fallo más grave del primer ejemplo: el título es un div, no un h1. Ese sí es un error con consecuencias, porque los encabezados son lo primero que se mira para entender de qué va una página.
Si tu web está en WordPress, lo normal es que el tema ya genere esta estructura: los temas de bloques actuales crean header, main y footer por defecto. Tienes más detalle sobre plantillas y plugins en la guía de SEO en WordPress.
HTML semántico y datos estructurados: no son lo mismo
El HTML semántico describe la estructura de la página (qué es cabecera, qué es contenido). Los datos estructurados describen el significado del contenido (esto es un producto, cuesta tanto, lo firma tal persona) con el vocabulario Schema.org. Para optar a resultados enriquecidos en Google cuentan los datos estructurados, no las etiquetas HTML.
Según la introducción de Google a los datos estructurados, el formato recomendado es JSON-LD, un bloque de código aparte que no depende de cómo esté maquetada la página.
Es una confusión frecuente: poner un article no equivale a marcar un Article de Schema.org. Son dos capas distintas y lo ideal es tener las dos bien.
Cómo ayuda el HTML semántico a las IA a leer tu contenido
Los asistentes de IA y sus rastreadores trabajan con el texto de la página, y antes de usarlo tienen que separar el contenido del menú, los banners y el pie. Una página con un main y un article claros, y encabezados ordenados, les pone ese trabajo más fácil y reduce el riesgo de que se queden con ruido.
Aquí conviene ser prudente: ningún proveedor de IA ha publicado que premie el HTML semántico, así que no lo trates como un truco. Es una cuestión de sentido común: cuanto más limpio llega tu contenido, menos se pierde por el camino.
Lo que nosotros miramos en este punto es que el contenido esté en el HTML que devuelve el servidor (no solo tras ejecutar JavaScript), que cada apartado tenga su encabezado y que el texto principal no esté mezclado con bloques repetidos. Si quieres profundizar, en la página sobre cómo preparar tu web para los LLM explicamos el resto de factores, y en la guía para optimizar el archivo robots.txt tienes cómo dar o quitar acceso a esos rastreadores.
Cómo comprobar el HTML semántico de tu web en dos minutos
Para comprobar el HTML semántico de una página basta con el navegador: inspecciona el código con las herramientas para desarrolladores de Chrome, mira el árbol de accesibilidad y, si quieres revisar todo el sitio, lanza un rastreo. No necesitas saber programar para detectar los fallos más habituales.
- Inspecciona la página. Botón derecho sobre el contenido y «Inspeccionar». En el panel Elementos busca
main: debería haber uno y contener el texto principal, no el menú. - Mira el árbol de accesibilidad. En el mismo panel, abre la pestaña Accesibilidad y activa la opción de mostrar el árbol de accesibilidad, como explica la documentación de Chrome DevTools. Verás la página como la recibe un lector de pantalla: zonas, encabezados y enlaces.
- Revisa los encabezados. Un
h1que describa la página yh2yh3en orden, sin usar encabezados para textos del menú o del pie. - Rastrea el sitio completo. Con una extracción personalizada en Screaming Frog puedes contar cuántos
mainoarticletiene cada plantilla (por ejemplo con el XPathcount(//main)). En la guía de Screaming Frog tienes cómo configurar las extracciones.
En una auditoría esto no lo revisamos URL a URL, sino por plantillas: la de portada, la de categoría, la de ficha y la de post. Si la plantilla está bien, lo están todas las páginas que la usan. Es uno de los puntos de nuestro checklist de auditoría SEO on page.
Preguntas frecuentes sobre HTML5 y SEO
¿No está tu pregunta? Escríbeme a alberto@ingenieroseo.com y te contesto en menos de 24 horas.
¿Usar etiquetas HTML5 mejora el posicionamiento en Google?
No de forma directa. Google indica en su guía de inicio de SEO que rara vez puede apoyarse en los significados semánticos del HTML, porque la mayoría de las webs no tienen un código válido. El HTML semántico mejora la accesibilidad y deja el contenido principal mejor delimitado, y esos son beneficios indirectos.
¿Cuántas etiquetas main puede tener una página?
Una página solo debe tener una etiqueta main visible. Puede haber más en el código si las demás llevan el atributo hidden, algo que usan algunas aplicaciones web, pero en un sitio normal lo correcto es una sola.
¿Hace falta poner role=»main» en la etiqueta main?
No. La etiqueta main ya lleva ese papel de forma implícita y funciona en todos los navegadores desde 2015. El atributo role="main" se añadía por compatibilidad con navegadores antiguos; hoy es redundante, aunque no perjudica.
¿Puedo tener varios h1 en una página?
El estándar HTML lo permite y Google afirma que el orden de los encabezados no afecta a la Búsqueda. Aun así, mi recomendación es un único h1 que describa la página y el resto en h2 y h3: es más claro para quien navega con lector de pantalla y para quien mantiene la web.
¿Qué diferencia hay entre section, article y div?
article es una pieza que se entiende sola, como un post o una ficha de producto. section agrupa por temas una parte de un contenido, normalmente con su encabezado. div no significa nada y es la opción correcta cuando solo necesitas un contenedor para dar estilo.
Qué hacer ahora con tu web
Abre una página de cada tipo de plantilla, comprueba que hay un main, un h1 y encabezados ordenados, y corrige solo lo que esté claramente mal. No rehagas una web que funciona por purismo: el HTML semántico es higiene, no una palanca de tráfico.
Si tienes dudas con algún caso concreto de tu plantilla, déjala en los comentarios y la vemos.
¿Vas a rehacer la web? Es el mejor momento para dejar la estructura bien resuelta. Te acompañamos para que nazca limpia y pensada para buscadores e IA.
