HTML semántico: qué etiquetas usar y por qué importan para la accesibilidad, Google y la IA

Un navegador muestra igual un <div> que un <nav>. La diferencia está en el significado: el HTML semántico indica a cada programa que lee la página qué papel cumple cada bloque. MDN lo define como el uso de los elementos según su significado, no según su aspecto por defecto. Buscadores, tecnologías de apoyo y los rastreadores que alimentan los modelos de IA se benefician de ese significado.

¿Cuáles son las principales etiquetas HTML semánticas?

El estándar HTML define decenas de elementos. Estos son los que estructuran casi cualquier página de contenido:

Las etiquetas de texto también aportan significado: <strong> para la importancia, <em> para el énfasis, <blockquote> y <cite> para las citas, <ul> y <ol> para las listas, <a> para los enlaces y <button> para las acciones.

¿Por qué importa el HTML semántico para la accesibilidad?

Los lectores de pantalla construyen un mapa de la página a partir de sus etiquetas. Las regiones <header>, <nav>, <main>, <aside> y <footer> permiten saltar directamente al menú o al contenido, y la lista de encabezados funciona como índice. Los tutoriales de accesibilidad del W3C sobre la estructura de la página recomiendan por eso estas regiones y un orden lógico de encabezados.

Un <div> clicable es invisible para el teclado y mudo para un lector de pantalla, a menos que reconstruya a mano lo que un <button> nativo ofrece gratis. Los elementos nativos traen su función, el foco del teclado y el comportamiento esperado. En muchos países, además, la accesibilidad de los sitios públicos y comerciales es una obligación legal, por lo que un marcado limpio también es una cuestión de cumplimiento normativo.

¿Ayuda el HTML semántico al SEO?

Google nunca ha presentado las etiquetas semánticas como un factor de posicionamiento directo, y una página hecha solo con <div> puede posicionar. El beneficio es indirecto, pero real:

• Detección del contenido principal: <main> y <article> ayudan a separar el texto que importa de los menús, barras laterales y pies que se repiten en cada página.
• Estructura del tema: una jerarquía de encabezados ordenada muestra qué cubre la página y cómo se relacionan sus partes, lo que refuerza la relevancia en búsquedas de cola larga.
• Comprensión precisa de los elementos: las tablas, listas y fechas reales se leen mejor que las imitaciones visuales hechas con bloques con estilo.
• Coherencia con los datos estructurados: el marcado semántico y el JSON-LD describen la misma página desde dos ángulos. Nuestra entrada sobre contenido estructurado muestra cómo encajan.

El HTML semántico forma parte del SEO técnico igual que las URL limpias o las páginas rápidas: una base que permite leer correctamente su contenido.

¿Cómo usan los asistentes de IA la estructura de una página?

ChatGPT, Gemini, Perplexity y los AI Overviews de Google no citan páginas enteras: seleccionan fragmentos. Los rastreadores que descargan su página suelen eliminar la navegación y los elementos repetidos, y luego dividen el texto en bloques. Una sección que empieza con un <h2> claro, responde a su pregunta en el primer párrafo y se mantiene dentro de una <section> produce un bloque limpio. El mismo contenido repartido en <div> anidados, con encabezados simulados en negrita, produce fragmentos mezclados con elementos del menú. Nuestra entrada sobre el troceado de contenido explica cómo escribir secciones que resistan ese corte.

¿Cómo es una página de artículo bien estructurada?

Este es el esqueleto de un artículo de blog, descrito etiqueta por etiqueta:

1. <header> contiene el logotipo y un <nav> con el menú principal. Este bloque se repite en cada página, así que los rastreadores aprenden a ignorarlo.

2. <main> se abre justo después. Contiene un único <article>, el contenido que quiere ver indexado y citado.

3. Dentro del <article>, un <header> agrupa el <h1> (el tema de la página), el nombre del autor y un elemento <time datetime="2026-10-18"> con la fecha de publicación en un formato legible por máquinas.

4. Cada parte del artículo es una <section> que empieza con un <h2> formulado como la pregunta que responde, seguido de párrafos <p>, listas <ul> o una <table> con encabezados <th>.

5. Un gráfico va en una <figure> con una <img> con texto alternativo descriptivo y una <figcaption> que explica qué muestra.

6. Los enlaces relacionados van en un <aside>, fuera del flujo principal del artículo.

7. Un <footer> cierra la página con los enlaces legales y de contacto.

Con este esqueleto, un usuario de lector de pantalla llega al contenido con una tecla, Google ve un artículo principal con un esquema claro y un rastreador de IA puede tomar cualquier <section> como respuesta autónoma.

¿Cuáles son los errores de HTML semántico más habituales?

• Div por todas partes: los creadores de páginas suelen generar capas de <div> sin ninguna región. Compruebe al menos que existe un <main> y que envuelve el contenido.
• Encabezados saltados o mal usados: pasar de <h2> a <h4>, usar encabezados para agrandar texto o párrafos en negrita como falsos encabezados. Elija el nivel según la estructura y aplique el estilo con CSS.
• Varios <h1> en competencia: HTML lo permite, pero un único <h1> que describa el tema de la página sigue siendo la señal más clara para usuarios y buscadores.
• <div> y <span> clicables: use <a> para la navegación y <button> para las acciones.
• Tablas de maquetación y tablas falsas: las tablas son para datos; los datos mostrados en bloques con estilo pierden sus relaciones de filas y columnas.
• Texto en imágenes: un título o un precio dentro de una imagen no puede leerlo ni un rastreador ni un lector de pantalla.
• Fechas solo en texto: añada <time> con un atributo datetime para que la fecha no sea ambigua.

¿Cómo auditar la estructura semántica de una página?

Tres comprobaciones rápidas cubren la mayoría de los problemas. Primero, muestre el esquema de encabezados de la página y léalo por separado: debe contar el contenido. Segundo, busque <main>, <nav> y <article> en el código fuente. Tercero, recorra la página solo con el teclado y compruebe que cada enlace y cada botón son accesibles. Nuestra auditoría SEO on-page enumera los problemas de encabezados y marcado de cualquier URL, y la extensión gratuita de Sorank para Chrome muestra la estructura de encabezados de la página que está viendo.

Use cada etiqueta para lo que significa: un solo <main>, un solo <h1>, secciones ordenadas y tablas reales dan a las personas, a Google y a la IA el mismo mapa claro de su página. Con la estructura limpia, falta escribir y publicar contenido con regularidad: Sorank redacta y publica artículos optimizados para Google y la IA en autopilot.