Una página web puede funcionar y verse exactamente igual utilizando decenas de elementos <div> o empleando elementos como <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>. La diferencia está en que el segundo enfoque aporta información sobre qué representa cada parte del documento.
Eso es, simplificando, lo que buscamos cuando hablamos de HTML semántico. No consiste en utilizar etiquetas modernas porque sean mejores para SEO ni en sustituir automáticamente todos los <div>. Consiste en elegir el elemento HTML que mejor representa la función del contenido.
Una estructura semántica facilita la comprensión y el mantenimiento del código, tiene implicaciones importantes para la accesibilidad y proporciona una descripción más explícita de la organización de una página. También resulta relevante para el SEO y para un ecosistema en el que buscadores y sistemas basados en inteligencia artificial procesan enormes cantidades de contenido web.
Pero conviene separar lo que está documentado de algunas afirmaciones que han empezado a circular alrededor del GEO y la inteligencia artificial. Utilizar <article> o <section> no garantiza aparecer en Google AI Overviews ni ser citado por ChatGPT. La buena semántica tiene valor por sí misma y no necesita convertirse en otro supuesto truco SEO.
Respuesta rápida
El HTML semántico consiste en utilizar los elementos HTML según el significado y la función del contenido que representan. Elementos como <main>, <nav>, <article>, <section>, <aside>, <header> y <footer> describen la estructura de una página de forma más explícita que elementos genéricos como <div>. Bien utilizados, favorecen una estructura comprensible, mantenible y accesible.
En pocas palabras
- HTML semántico describe el significado y la función de las diferentes partes de un documento
<main>identifica el contenido principal<nav>representa bloques importantes de navegación<article>se utiliza para contenido que puede tener sentido de forma independiente<section>representa una sección temática cuando realmente existe una sección diferenciada<header>contiene información introductoria o ayudas de navegación de su ámbito<footer>representa información de cierre de su ámbito<aside>se utiliza para contenido relacionado indirectamente con el contenido que lo rodea<div>sigue siendo correcto cuando no existe un elemento semántico más apropiado- HTML semántico y datos estructurados de Schema.org no son lo mismo
- La semántica HTML tiene una relación especialmente importante con la accesibilidad
- No existe un HTML semántico específico para GEO, ChatGPT o Google AI Overviews
Índice
- Qué es HTML semántico
- HTML semántico frente a HTML no semántico
- Cuáles son las principales etiquetas semánticas de HTML
- Cómo utilizar correctamente <header>
- Cómo utilizar correctamente <nav>
- Cómo utilizar correctamente <main>
- Cómo utilizar correctamente <article>
- Cómo utilizar correctamente <section>
- Cómo utilizar correctamente <aside>
- Cómo utilizar correctamente <footer>
- Cómo combinar correctamente las etiquetas semánticas
- HTML semántico y encabezados H1-H6
- Cómo influye el HTML semántico en el SEO
- HTML semántico y accesibilidad
- HTML semántico y motores de inteligencia artificial
- HTML semántico frente a Schema.org
- Ejemplo completo de una página con HTML semántico
- Errores frecuentes al utilizar HTML semántico
- Cómo auditar el HTML semántico de una página
- Checklist de HTML semántico
- Preguntas frecuentes sobre HTML semántico
- Conclusión
¿Qué es HTML semántico?
El HTML semántico es una forma de escribir HTML utilizando los elementos de acuerdo con el significado que tienen dentro del documento. La elección de una etiqueta no depende únicamente de cómo queremos que aparezca visualmente un contenido, sino de qué representa realmente.
Si un bloque contiene la navegación principal de una web, <nav> puede describir su función. Si contiene el contenido principal del documento, existe <main>. Si tenemos una unidad de contenido que puede entenderse de manera independiente, podemos valorar <article>.
La semántica permite que el propio marcado aporte información sobre la estructura del documento en lugar de depender exclusivamente de nombres de clases, identificadores, CSS o de la interpretación visual de la página.
Qué significa realmente semántica
En este contexto, semántica hace referencia al significado. Un elemento semántico comunica qué papel desempeña su contenido.
Un <div> nos indica que existe una división genérica del documento. Por sí mismo no explica si contiene navegación, un artículo, el contenido principal o una sección temática.
Un <nav>, en cambio, ya expresa una función relacionada con la navegación. Un <main> identifica el contenido dominante del documento y un <article> representa una composición que puede tener sentido de forma independiente.
Qué es una etiqueta semántica de HTML
La expresión «etiqueta semántica» se utiliza habitualmente para referirse a elementos HTML cuyo nombre y definición aportan información sobre la función de su contenido.
<nav>, <main>, <article> o <footer> son ejemplos evidentes, pero la semántica de HTML no se limita a esos elementos estructurales. Elementos tan habituales como <button>, <form>, <table>, <blockquote>, <strong> o los encabezados <h1>–<h6> también tienen significado.
Por tanto, HTML semántico es un concepto más amplio que memorizar siete etiquetas estructurales.
Elementos semánticos y elementos genéricos
HTML también necesita elementos que no expresen una función específica. Los ejemplos clásicos son <div> para agrupaciones de bloque y <span> para contenido en línea.
Esto no los convierte en elementos incorrectos. Son herramientas necesarias cuando queremos agrupar contenido por motivos de estilo, scripting o estructura y no existe un elemento con un significado más apropiado.
¿HTML semántico significa dejar de utilizar <div>?
No. Sustituir todos los <div> por <section>, <article> u otros elementos no produce automáticamente un documento más semántico. De hecho, puede conseguir justo lo contrario si esos elementos no representan correctamente el contenido.
La pregunta adecuada no es «¿puedo evitar este div?», sino «¿existe un elemento HTML que describa mejor la función de este contenido?». Si la respuesta es no, utilizar <div> puede ser perfectamente correcto.
HTML semántico frente a HTML no semántico
La diferencia se entiende mejor comparando dos estructuras que podrían producir prácticamente el mismo resultado visual.
Una estructura basada en elementos genéricos
<div class="header">
...
</div>
<div class="navigation">
...
</div>
<div class="content">
...
</div>
<div class="footer">
...
</div>Los nombres de las clases permiten que un desarrollador intuya qué representa cada bloque. Sin embargo, todos siguen siendo elementos <div> desde el punto de vista del propio HTML.
La misma idea mediante elementos semánticos
<header>
...
</header>
<nav>
...
</nav>
<main>
...
</main>
<footer>
...
</footer>Ahora la función general de cada parte está expresada directamente mediante los elementos HTML utilizados.
Los dos documentos pueden verse exactamente igual
La semántica no determina que una cabecera sea azul, que el menú aparezca horizontalmente o que el footer tenga tres columnas. Esa presentación corresponde fundamentalmente a CSS.
HTML describe la estructura y el significado del contenido, mientras que CSS controla su presentación. Mantener separadas ambas responsabilidades facilita construir documentos más coherentes y mantenibles.
Una clase llamada navigation no equivale a <nav>
Una clase como class="navigation" puede ser muy útil para CSS o JavaScript, pero el nombre que inventamos para esa clase no tiene la misma semántica definida por HTML que el elemento <nav>.
Podemos incluso utilizar ambos conjuntamente cuando sea necesario.
<nav class="navigation-principal">
...
</nav>¿Cuáles son las principales etiquetas semánticas de HTML?
HTML dispone de numerosos elementos con significado semántico. Cuando hablamos específicamente de la estructura general de una página, algunos de los más importantes son <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>.
| Elemento | Función general | Uso habitual |
|---|---|---|
<header> | Contenido introductorio o ayudas de navegación | Cabecera de una página o artículo |
<nav> | Sección de navegación | Menú principal o navegación relevante |
<main> | Contenido dominante del documento | Contenido principal de la página |
<article> | Composición independiente | Artículo, noticia o publicación |
<section> | Sección temática | Apartado diferenciado de un documento |
<aside> | Contenido relacionado indirectamente | Información complementaria |
<footer> | Información de cierre de su ámbito | Pie de página o de un artículo |
Esta tabla sirve como orientación rápida, pero no deberíamos elegir una etiqueta únicamente por el ejemplo de la tercera columna. La función exacta de cada elemento depende del contexto en el que aparece.
Cómo utilizar correctamente <header>
El elemento <header> representa contenido introductorio o un conjunto de ayudas introductorias o de navegación para la parte del documento a la que pertenece.
En una web suele utilizarse para la cabecera general, donde pueden aparecer el logotipo, elementos de navegación, buscadores u otros componentes. Sin embargo, reducir <header> a «la cabecera de la web» es demasiado simplista.
<header> no significa necesariamente cabecera de toda la web
Un <article> puede disponer de su propio <header> con el título, autor, fecha u otra información introductoria. Por eso una misma página puede contener más de un elemento <header> cuando cada uno pertenece a un ámbito diferente.
<article>
<header>
<h2>Guía de HTML semántico</h2>
<p>Publicado por Pepito Pérez</p>
</header>
<p>Contenido del artículo...</p>
</article>¿Puede haber varios <header> en una página?
Sí. El elemento no está reservado exclusivamente para la cabecera global. Diferentes partes del documento pueden disponer de contenido introductorio propio cuando la estructura lo justifica.
Lo importante es comprender a qué contenido pertenece cada <header> y evitar utilizarlo simplemente como sustituto estilístico de cualquier contenedor situado en la parte superior de un bloque.
Cómo utilizar correctamente <nav>
El elemento <nav> representa una sección cuyo propósito es proporcionar enlaces de navegación.
El menú principal es el ejemplo más evidente, aunque no es el único. Una página puede tener diferentes bloques de navegación con funciones distintas.
No todos los grupos de enlaces necesitan <nav>
Una lista de enlaces dentro de un párrafo, una colección de referencias o varios enlaces secundarios no necesitan convertirse automáticamente en <nav>.
La etiqueta tiene sentido cuando el bloque cumple realmente una función de navegación relevante dentro del documento o del sitio.
¿Puede haber varios <nav>?
Sí. Una web puede disponer, por ejemplo, de navegación principal y de otra navegación relevante asociada a una parte concreta del contenido.
Cuando existen varios bloques de navegación, proporcionarles una identificación accesible adecuada puede ayudar a diferenciarlos.
Cómo utilizar correctamente <main>
<main> representa el contenido dominante del cuerpo del documento. Es decir, aquello que constituye el propósito principal de esa página concreta.
Una página de producto tendrá como contenido principal la información sobre ese producto. Un artículo tendrá como contenido principal el propio artículo. Una página de servicios tendrá como contenido principal la información específica del servicio.
Qué debería quedar fuera de <main>
Los elementos repetidos en muchas páginas del sitio y que no forman parte del contenido principal suelen quedar fuera de <main>. Es el caso habitual de la navegación global, la cabecera general o el footer global.
¿Cuántos <main> puede tener una página?
En una página convencional debemos identificar claramente un contenido principal. No es buena práctica utilizar varios elementos <main> visibles simultáneamente para dividir visualmente el contenido en bloques.
Si necesitamos varias secciones dentro del contenido principal, existen otros elementos y estructuras más adecuados para representarlas.
Cómo utilizar correctamente <article>
El elemento <article> representa una composición completa o relativamente independiente dentro de un documento, página, aplicación o sitio.
Una forma práctica de valorar su uso consiste en preguntarnos si ese contenido podría entenderse o distribuirse de manera independiente sin perder su significado esencial.
Cuándo utilizar <article>
Una entrada de blog o una noticia son ejemplos intuitivos. También pueden existir otros contenidos independientes para los que <article> resulte apropiado dependiendo de su contexto.
El nombre de la etiqueta puede inducir a pensar que solo sirve para artículos periodísticos. No es así. Lo relevante es la independencia conceptual del contenido.
¿Puede existir un <article> dentro de otro?
Sí, cuando el contenido interior está relacionado con el artículo exterior pero constituye a su vez una unidad independiente. Un ejemplo clásico puede ser una publicación que contiene respuestas o comentarios representados también como unidades diferenciadas.
¿Una ficha de producto debe utilizar <article>?
No existe una regla universal que obligue a marcar todas las fichas de producto mediante <article>. Debemos valorar la naturaleza del contenido y la estructura concreta de la página en lugar de aplicar una receta idéntica a cualquier eCommerce.
Cómo utilizar correctamente <section>
<section> representa una sección genérica y temática de un documento cuando no existe un elemento más específico que describa mejor su función.
Es probablemente uno de los elementos semánticos que más fácilmente se utilizan de manera incorrecta porque parece un sustituto atractivo para cualquier <div>.
<section> no es un sustituto semántico de <div>
Un bloque creado únicamente para aplicar un fondo, establecer una cuadrícula o añadir márgenes no se convierte en una sección temática por esos motivos.
Si la agrupación responde exclusivamente a necesidades de CSS o JavaScript y no representa una parte diferenciada del contenido, <div> puede ser la elección más apropiada.
Las secciones y sus encabezados
Una sección temática suele poder identificarse mediante un encabezado que explique de qué trata. Esto conecta directamente el HTML semántico con la estructura de encabezados H1, H2, H3, H4, H5 y H6.
Utilizar <section> no corrige automáticamente una jerarquía de encabezados deficiente. La estructura semántica de los contenedores y la jerarquía H1-H6 deben tener sentido conjuntamente.
Cuándo utilizar <div> en lugar de <section>
Si no podemos explicar razonablemente cuál es el tema de esa supuesta sección o por qué constituye una unidad diferenciada del documento, probablemente no necesitemos <section>.
Un <div> correctamente utilizado es mejor que una etiqueta semántica elegida únicamente para aparentar que el código es más moderno.
Cómo utilizar correctamente <aside>
El elemento <aside> representa contenido relacionado de forma indirecta con el contenido que lo rodea. Su función depende, por tanto, del contexto.
<aside> no significa simplemente columna lateral
La palabra aside y su uso habitual en determinados diseños han provocado que a veces se identifique automáticamente con una sidebar.
Sin embargo, la posición visual no determina la semántica. Un bloque situado a la derecha mediante CSS no tiene por qué ser <aside> y un <aside> no tiene por qué aparecer visualmente en una columna lateral.
Ejemplos de contenido complementario
Dependiendo del contexto, notas complementarias, información relacionada o determinados bloques secundarios pueden ser candidatos a utilizar <aside> cuando su relación con el contenido principal es indirecta.
Cómo utilizar correctamente <footer>
El elemento <footer> representa información de cierre correspondiente a la parte del documento a la que pertenece.
El ejemplo más conocido es el pie global de una web con información corporativa, legal, navegación complementaria u otros datos. Pero, igual que ocurre con <header>, su uso no está limitado al documento completo.
Un artículo puede tener su propio <footer>
Un <article> puede incluir un footer con información relacionada con su autoría, metadatos u otros datos de cierre que pertenecen específicamente a esa unidad de contenido.
¿Puede haber varios <footer> en una página?
Sí. Lo importante vuelve a ser el ámbito al que pertenece cada elemento. Podemos tener el footer general del documento y otros asociados a componentes que admiten su propio contenido de cierre.
Cómo combinar correctamente las etiquetas semánticas
El verdadero valor del HTML semántico aparece cuando dejamos de pensar en etiquetas aisladas y analizamos cómo trabajan conjuntamente para representar un documento.
<header>
<nav>
...
</nav>
</header>
<main>
<article>
<header>
<h1>HTML semántico</h1>
</header>
<section>
<h2>Qué es HTML semántico</h2>
...
</section>
<section>
<h2>HTML semántico y SEO</h2>
...
</section>
<footer>
...
</footer>
</article>
</main>
<footer>
...
</footer>En este ejemplo, el primer <header> pertenece a la página, mientras que el segundo introduce el artículo. Lo mismo ocurre con los dos elementos <footer>. Uno cierra el artículo y el otro pertenece al documento general.
Cómo decidir qué elemento utilizar
- Si representa el contenido principal del documento, debemos valorar
<main> - Si constituye una unidad que puede tener sentido de forma independiente, debemos valorar
<article> - Si representa una sección temática real, debemos valorar
<section> - Si proporciona navegación relevante, debemos valorar
<nav> - Si es contenido relacionado indirectamente, debemos valorar
<aside> - Si introduce o cierra el contenido de su ámbito, debemos valorar
<header>o<footer> - Si no existe un significado semántico específico,
<div>puede ser la solución correcta
HTML semántico y encabezados H1-H6
La estructura semántica de una página y la jerarquía de sus encabezados están estrechamente relacionadas, pero no son exactamente lo mismo.
Elementos como <main>, <article> o <section> ayudan a describir qué función desempeñan distintas partes del documento. Los elementos <h1> a <h6> expresan niveles de encabezado y ayudan a organizar temas y subtemas.
<section> no crea automáticamente una buena jerarquía
Introducir varios elementos <section> no soluciona encabezados mal organizados. Podemos tener una página llena de etiquetas semánticas y, al mismo tiempo, una estructura H1-H6 incoherente.
Por eso conviene analizar ambas dimensiones conjuntamente. En la guía sobre cómo estructurar H1, H2, H3, H4, H5 y H6 explico específicamente cómo construir esa jerarquía sin utilizar los niveles como simples herramientas de diseño.
¿Cómo influye el HTML semántico en el SEO?
El HTML semántico es una buena práctica de desarrollo web, pero debemos evitar convertir cada buena práctica en un supuesto factor directo de posicionamiento.
No existe una regla según la cual sustituir un <div> por <section> haga subir una página determinadas posiciones en Google. Esa no es una forma útil de entender su relación con el SEO.
HTML semántico y comprensión de la estructura
Una de sus principales virtudes es hacer más explícita la función de determinadas partes del documento. Un elemento <main> tiene un significado definido que un contenedor genérico no proporciona por sí mismo.
Eso no significa que los buscadores sean incapaces de comprender una página construida con <div>. Los motores modernos utilizan múltiples señales para interpretar documentos web. La semántica HTML debe entenderse como una forma correcta y estandarizada de describir el contenido, no como un requisito mágico de indexación.
HTML semántico y rastreo
Una buena estructura semántica tampoco sustituye los requisitos técnicos necesarios para que una página pueda ser descubierta, rastreada e indexada.
Los enlaces rastreables, las URLs, las directivas robots, las etiquetas canonical, los sitemaps, las respuestas HTTP y la disponibilidad del contenido son cuestiones diferentes que deben analizarse dentro de una estrategia SEO técnica completa.
¿HTML semántico es un factor de ranking?
No recomendaría presentar «usar HTML semántico» como un factor de ranking independiente. Es más preciso considerarlo una buena práctica de construcción web que favorece una estructura explícita, accesible y mantenible.
El SEO On Page debe evaluar el documento completo y no comprobar únicamente si aparecen determinadas etiquetas. El HTML es una de las capas que revisamos dentro de una auditoría SEO On Page, junto con contenido, encabezados, metadatos, enlaces, imágenes y otros elementos.
HTML semántico y accesibilidad
La relación entre HTML semántico y accesibilidad es especialmente importante porque determinados elementos proporcionan información estructural que puede ser utilizada por tecnologías de asistencia.
Elementos como <main> y <nav> pueden contribuir a identificar diferentes regiones de una página. Esto permite que la estructura no dependa exclusivamente de pistas visuales como la posición, el tamaño, el color o los espacios.
Landmarks y estructura de la página
Algunos elementos HTML están asociados a regiones o landmarks que permiten representar zonas significativas de la interfaz. Una persona que utiliza determinadas tecnologías de asistencia puede aprovechar esa estructura para orientarse y navegar por el documento.
Esto muestra por qué la semántica no es una cuestión puramente académica. Elegir correctamente los elementos puede afectar a cómo diferentes usuarios interactúan con la página.
HTML nativo antes que semántica recreada artificialmente
ARIA permite aportar información relacionada con accesibilidad en situaciones donde resulta necesaria, pero no debería utilizarse indiscriminadamente para reconstruir comportamientos y significados que HTML ya ofrece de forma nativa.
Cuando existe un elemento HTML adecuado para representar correctamente un contenido o control, utilizar ese elemento nativo suele proporcionar una base más robusta que intentar reproducir toda su semántica mediante elementos genéricos y atributos adicionales.
HTML semántico y motores de inteligencia artificial
La expansión de Google AI Overviews, ChatGPT, Gemini, Claude, Perplexity y otros sistemas ha despertado una pregunta lógica. ¿Puede el HTML semántico facilitar que una máquina comprenda mejor el contenido de una página?
La respuesta requiere distinguir entre lo que técnicamente aporta el HTML y lo que sabemos públicamente sobre sistemas concretos.
Una estructura explícita aporta información sobre el documento
HTML semántico permite expresar mediante elementos estandarizados que determinado contenido es navegación, contenido principal, un artículo, una sección temática o información complementaria.
Desde el punto de vista de la ingeniería de la información, proporcionar estructura explícita resulta preferible a depender exclusivamente de la apariencia visual o de nombres de clases inventados por cada desarrollador.
Lo que no podemos afirmar sobre ChatGPT y otros sistemas
No podemos convertir esa ventaja estructural en afirmaciones no demostradas como «usar <article> hace que ChatGPT cite una página» o «Google AI Overviews posiciona mejor las páginas con <section>».
Los sistemas de búsqueda y los modelos de inteligencia artificial utilizan procesos mucho más complejos y no existe una fórmula pública que permita garantizar una cita mediante determinadas etiquetas HTML.
¿Existe un HTML específico para GEO?
No existe un HTML semántico específico para GEO. La recomendación sigue siendo utilizar correctamente los estándares web, ofrecer contenido útil, crear una estructura comprensible y describir con precisión las relaciones entre las diferentes partes de la información.
Si en el futuro aparecen recomendaciones técnicas documentadas específicamente para determinados motores de IA, deberán evaluarse sobre la base de esas evidencias. Mientras tanto, es preferible no convertir hipótesis razonables en supuestos factores de visibilidad.
HTML semántico no es lo mismo que Schema.org
HTML semántico y datos estructurados suelen aparecer juntos en conversaciones sobre SEO porque ambos aportan información interpretable por máquinas. Sin embargo, no son tecnologías equivalentes ni solucionan el mismo problema.
| Tecnología | Función | Ejemplo |
|---|---|---|
| HTML semántico | Representar estructura y significado del documento | <article> |
| Schema.org | Describir entidades y sus propiedades mediante un vocabulario compartido | Article |
| JSON-LD | Formato utilizado para expresar datos enlazados y habitualmente datos estructurados | "@type": "Article" |
| ARIA | Aportar semántica, estados y propiedades relacionadas con accesibilidad | aria-label |
HTML semántico describe el documento
Elementos como <nav>, <main> o <article> forman parte del propio marcado HTML y expresan la función de determinadas partes del contenido.
Schema.org describe entidades y propiedades
Schema.org proporciona un vocabulario que permite describir de forma estructurada entidades como organizaciones, personas, productos, artículos, eventos y muchas otras, junto con sus propiedades y relaciones.
Ambos enfoques pueden complementarse. Una página puede utilizar correctamente HTML semántico y, además, implementar datos estructurados apropiados para describir determinadas entidades.
Ejemplo completo de una página con HTML semántico
Veamos una estructura simplificada de una entrada de blog construida primero mediante contenedores genéricos.
Versión basada principalmente en <div>
<div class="header">
<div class="navigation">
...
</div>
</div>
<div class="main">
<div class="post">
<h1>HTML semántico</h1>
<div class="block">
<h2>Qué es HTML semántico</h2>
...
</div>
<div class="block">
<h2>HTML semántico y SEO</h2>
...
</div>
</div>
</div>
<div class="footer">
...
</div>Versión con elementos semánticos
<header>
<nav>
...
</nav>
</header>
<main>
<article>
<h1>HTML semántico</h1>
<section>
<h2>Qué es HTML semántico</h2>
...
</section>
<section>
<h2>HTML semántico y SEO</h2>
...
</section>
</article>
</main>
<footer>
...
</footer>Qué ha cambiado realmente
| Antes | Después | Qué expresa |
|---|---|---|
<div class="header"> | <header> | Contenido introductorio |
<div class="navigation"> | <nav> | Navegación |
<div class="main"> | <main> | Contenido principal |
<div class="post"> | <article> | Contenido independiente |
<div class="block"> | <section> | Sección temática |
<div class="footer"> | <footer> | Información de cierre |
La primera versión no tiene por qué ser HTML inválido ni impedir que la página funcione. La diferencia es que la segunda versión expresa mediante elementos estandarizados información que antes dependía principalmente de nombres de clases y del contexto.
Errores frecuentes al utilizar HTML semántico
Sustituir todos los <div> por <section>
Es probablemente el error conceptual más frecuente. <section> no es la versión moderna o SEO de <div>. Si el bloque no constituye una sección temática, utilizar <section> puede aportar una semántica incorrecta.
Crear una <section> para cada bloque visual
El hecho de que un diseño tenga franjas, fondos o columnas diferentes no implica que cada una sea una sección semántica. La presentación visual y la estructura documental son dimensiones distintas.
Utilizar <nav> para cualquier grupo de enlaces
<nav> debe representar navegación relevante. No necesitamos envolver cualquier conjunto de enlaces de una página con esta etiqueta.
Pensar que <aside> significa sidebar
La posición visual no determina el elemento HTML. Una columna lateral puede contener información que no corresponda a <aside> y un <aside> puede mostrarse en cualquier posición mediante CSS.
Creer que solo puede existir un <header> o un <footer>
Ambos pueden pertenecer a diferentes ámbitos dentro de una página. Lo importante es que su uso represente correctamente el contenido al que están asociados.
Utilizar elementos semánticos únicamente por SEO
Elegir <article> o <section> porque creemos que Google los «premia» conduce a decisiones incorrectas. Primero debemos preguntarnos qué significa el contenido y qué elemento lo representa correctamente.
Añadir ARIA cuando HTML ya proporciona la semántica necesaria
Los atributos y roles ARIA son herramientas importantes, pero añadirlos innecesariamente no convierte una página en más accesible. Siempre que sea posible debemos partir de una estructura HTML nativa correcta.
Confundir HTML semántico con Schema.org
Ambas tecnologías pueden proporcionar información interpretable por máquinas, pero tienen funciones diferentes. Implementar <article> no equivale a declarar datos estructurados de tipo Article.
Cómo auditar el HTML semántico de una página
Una auditoría de HTML semántico no debería limitarse a buscar si existen <header>, <main> o <article>. Debemos comprobar si los elementos utilizados representan realmente el contenido que contienen.
Inspeccionar el HTML real
Las herramientas de desarrollo del navegador permiten comprobar qué estructura genera finalmente una plantilla, CMS o aplicación. Esto es importante porque lo configurado en el editor no siempre coincide con el HTML que recibe el navegador.
Revisar las regiones principales
- Identificar el contenido principal
- Comprobar las áreas de navegación
- Revisar si los artículos son realmente unidades independientes
- Comprobar si las secciones representan temas diferenciados
- Revisar el contenido complementario
- Analizar headers y footers según su contexto
- Comprobar conjuntamente la jerarquía H1-H6
No confundir validación con calidad semántica
Que un documento supere una validación automática no significa necesariamente que todas las decisiones semánticas sean las mejores. Una herramienta puede detectar determinados errores técnicos, pero interpretar correctamente el significado del contenido requiere contexto.
Por eso la revisión del HTML debe integrarse en una auditoría SEO On Page completa y no reducirse a comprobar automáticamente una lista de etiquetas.
Checklist de HTML semántico
- El contenido principal de la página está claramente identificado
<main>se utiliza para representar el contenido dominante cuando corresponde<nav>se reserva para bloques de navegación relevantes- Los elementos
<header>representan contenido introductorio o ayudas de navegación de su ámbito - Los elementos
<footer>contienen información de cierre relacionada con su ámbito - Los
<article>pueden justificarse como unidades independientes - Los
<section>representan secciones temáticas reales <aside>se utiliza por la relación del contenido y no por su posición visual- No se han sustituido indiscriminadamente todos los
<div> - Los encabezados H1-H6 mantienen una jerarquía lógica
- La estructura semántica no depende de la presentación CSS
- No se utiliza ARIA innecesariamente para recrear elementos HTML nativos
- HTML semántico y Schema.org se utilizan con objetivos diferentes
- La plantilla y los componentes no introducen estructuras incoherentes
- Las etiquetas se han elegido por el significado real del contenido
Preguntas frecuentes sobre HTML semántico
¿Qué es HTML semántico?
HTML semántico consiste en utilizar los elementos HTML de acuerdo con el significado y la función del contenido. En lugar de depender exclusivamente de elementos genéricos, emplea elementos específicos cuando representan correctamente partes como navegación, contenido principal, artículos, secciones o información complementaria.
¿Qué son las etiquetas semánticas de HTML?
Son elementos cuyo significado aporta información sobre el contenido que representan. Entre los elementos estructurales más conocidos se encuentran <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>.
¿Para qué sirve el HTML semántico?
Sirve para representar de forma más explícita la estructura y el significado de un documento. Esto facilita el mantenimiento del código y puede aportar información útil para navegadores, tecnologías de asistencia y otros sistemas que procesan HTML.
¿Cuál es la diferencia entre <div> y <section>?
<div> es un contenedor genérico sin un significado estructural específico. <section> representa una sección temática del documento. Si un bloque existe únicamente por motivos de diseño o programación y no constituye una sección real, <div> puede ser más apropiado.
¿Cuál es la diferencia entre <section> y <article>?
<section> representa una sección temática dentro de un documento, mientras que <article> se utiliza para una composición que puede tener sentido de forma independiente. La elección depende del papel que desempeña el contenido y no de su apariencia.
¿Puede haber varios <header> y <footer>?
Sí. Un documento puede tener una cabecera y un pie generales, mientras que determinados contenidos pueden disponer de sus propios elementos <header> o <footer> cuando pertenecen a ámbitos diferentes.
¿El HTML semántico mejora el SEO?
HTML semántico es una buena práctica para representar correctamente la estructura del contenido, pero no debería presentarse como un factor aislado que garantiza mejores posiciones. Su valor SEO está relacionado con construir documentos claros, estandarizados y técnicamente sólidos dentro de una estrategia mucho más amplia.
¿El HTML semántico mejora la accesibilidad?
Puede contribuir de forma importante a la accesibilidad porque determinados elementos proporcionan estructura y semántica que las tecnologías de asistencia pueden utilizar. No obstante, utilizar etiquetas semánticas no garantiza por sí solo que toda una web sea accesible.
¿HTML semántico y Schema.org son lo mismo?
No. HTML semántico representa la estructura y función del contenido mediante elementos HTML. Schema.org proporciona un vocabulario para describir entidades, propiedades y relaciones mediante datos estructurados. Ambos pueden utilizarse conjuntamente.
¿HTML semántico ayuda a ChatGPT y otros motores de IA?
El HTML semántico proporciona información estructural explícita que puede ser procesada por sistemas automatizados. Sin embargo, no existe una regla pública que permita afirmar que utilizar determinadas etiquetas consiga que una página sea citada por ChatGPT, Gemini, Claude, Perplexity o Google AI Overviews.
¿Existe un HTML específico para GEO?
No existe un conjunto especial de etiquetas HTML para GEO. La recomendación es utilizar correctamente los estándares web, estructurar la información con claridad y evitar técnicas creadas únicamente para intentar manipular sistemas de búsqueda o inteligencia artificial.
HTML que describe el contenido, no solo su apariencia
El HTML semántico no consiste en sustituir etiquetas genéricas por otras que parezcan más modernas. Consiste en elegir el elemento que mejor representa la función real de cada contenido.
<main> no es un <div> mejorado para SEO. <section> no es una forma moderna de crear bloques. <aside> no significa columna derecha. <header> y <footer> tampoco están limitados necesariamente a una única aparición en toda la página.
Cuando utilizamos correctamente estos elementos, el propio HTML explica mejor cómo está construido el documento. Esa estructura tiene beneficios claros para el desarrollo y la accesibilidad y constituye una base técnicamente sólida para cualquier proyecto SEO.
También es una forma sensata de construir para un futuro en el que cada vez más sistemas automatizados procesan información publicada en la web. No porque exista un código secreto para ChatGPT o AI Overviews, sino porque una web bien estructurada sigue siendo preferible a una web estructuralmente ambigua.
Dentro de una estrategia SEO On Page, esta capa debe analizarse junto con la jerarquía de encabezados H1-H6 y el resto de elementos incluidos en una auditoría SEO On Page completa.