HTML semántico: qué es y por qué importa

Dos páginas pueden verse idénticas en pantalla y estar construidas de forma muy distinta por dentro. En una, cada parte lleva la etiqueta que le corresponde: cabecera, menú, contenido principal, pie. En la otra, casi todo son bloques genéricos que solo se distinguen por su aspecto. A esa diferencia se refiere el HTML semántico: elegir la etiqueta según el significado del contenido, y no solo según cómo se ve.

No es un truco ni una promesa de posicionamiento. Es una base de calidad que facilita el trabajo de quien mantiene la web, ayuda a las personas que navegan con teclado o con lector de pantalla y ofrece a navegadores y buscadores una estructura más fácil de leer. En esta guía explicamos qué etiquetas existen, cómo usarlas bien y qué dicen las fuentes oficiales sobre lo que aportan de verdad.

Actualizado el 30 de octubre de 2026. Una versión anterior de este artículo daba a entender que el HTML semántico mejora por sí solo el posicionamiento y la lectura de las inteligencias artificiales; lo hemos corregido porque las fuentes oficiales no lo garantizan. Las fuentes se consultaron ese mismo día.

Resumen rápido

HTML semántico significa usar la etiqueta que corresponde al significado de cada parte de la página.
La estructura básica se apoya en header, nav, main, article, section, aside y footer, además de los encabezados h1 a h6.
Cada página debería tener un único h1 y los encabezados deben ir en orden, sin saltarse niveles.
Su valor principal es la accesibilidad y el mantenimiento. Para el posicionamiento, Google no promete nada concreto.
Antes de añadir ARIA, comprueba si existe una etiqueta nativa que ya haga lo que necesitas.

Qué es el HTML y qué significa que sea semántico

HTML (HyperText Markup Language) es el lenguaje que define la estructura y el contenido de una página web. CSS se encarga del aspecto y JavaScript, del comportamiento. Hoy el estándar lo mantiene el grupo WHATWG como un «estándar vivo» que se actualiza de forma continua.

Una etiqueta es semántica cuando su nombre dice qué es el contenido. <nav> indica que ahí hay navegación; <div> no dice nada. Esa información no se ve en pantalla, pero la aprovechan los lectores de pantalla (que permiten saltar directamente al menú o al contenido principal), el propio navegador y cualquiera que tenga que modificar la página en el futuro.

Las etiquetas que dan estructura a una página

Estas son las etiquetas de estructura más habituales, con la función que les asignan el estándar HTML y la documentación de MDN:

Etiqueta	Para qué sirve	Regla que conviene recordar
`<header>`	Contenido introductorio: logotipo, nombre del sitio y, a veces, el menú.	Como hijo directo de `body` es la cabecera de toda la web; dentro de un `article` o `section`, la de ese bloque.
`<nav>`	Bloques de navegación principal, dentro de la página o hacia otras páginas.	Pensada para los grandes bloques de navegación. Los enlaces secundarios del pie normalmente no la necesitan.
`<main>`	El contenido principal y propio de esa página.	Solo puede haber uno visible por documento y no puede ir dentro de `article`, `aside`, `footer`, `header` ni `nav`.
`<article>`	Contenido autónomo que tendría sentido por sí solo, como una entrada de blog.	Puede reutilizarse o sindicarse sin el resto de la página.
`<section>`	Agrupación temática de contenido.	Normalmente lleva su encabezado. No es un contenedor genérico: para estilos o scripts se usa `div`.
`<aside>`	Contenido relacionado solo de forma tangencial: barras laterales, citas destacadas, enlaces relacionados.	No sirve para comentarios secundarios dentro del texto principal.
`<footer>`	Información de cierre de su bloque o de la página, como derechos, enlaces legales o datos de contacto.	Se asocia al elemento seccionador más cercano o, si no hay ninguno, a la página.
`<search>`	Contenedor de los controles para buscar o filtrar contenido.	Crea una región de búsqueda sin añadir `role="search"`. Disponible en todos los navegadores principales desde octubre de 2023, según MDN.

Un ejemplo de estructura para la web de una pyme

Así se vería el esqueleto de una página sencilla. No importa el diseño que le pongas después: la estructura es la misma.

<html lang="es">
<body>
  <header>
    <a href="/">Nombre del negocio</a>
    <nav aria-label="Principal">
      <ul>
        <li><a href="/servicios/">Servicios</a></li>
        <li><a href="/contacto/">Contacto</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Qué hace tu negocio y para quién</h1>
    <section>
      <h2>Servicios</h2>
      <p>…</p>
    </section>
    <section>
      <h2>Preguntas frecuentes</h2>
      <p>…</p>
    </section>
    <aside>
      <h2>Artículos relacionados</h2>
      <ul>…</ul>
    </aside>
  </main>
  <footer>
    <p>Aviso legal · Política de privacidad</p>
  </footer>
</body>
</html>

Fíjate en tres detalles: el idioma se declara en la etiqueta html, el menú tiene un nombre accesible (aria-label) y cada bloque importante empieza por su encabezado. Para decidir el contenido de cada sección, nuestra guía de diseño web para pymes detalla qué debe tener una web profesional.

Encabezados: el índice de tu página

Las personas que usan lector de pantalla suelen recorrer los encabezados para hacerse una idea del contenido y saltar a la parte que les interesa. Por eso importan más de lo que parece:

Un único h1 por página, que describa su contenido de forma parecida al título del documento. El estándar permite varios si no están anidados, pero MDN no lo considera una buena práctica.
Sin saltarse niveles: después de un h2 viene un h3, no un h5.
El encabezado se elige por su significado, no por su tamaño. Si quieres un texto grande que no es un título, cámbialo con CSS.

En la práctica, estos fallos son habituales: según el informe WebAIM Million 2026, el 41,8 % de las páginas de inicio analizadas saltaba algún nivel de encabezado y el 18,1 % tenía más de un h1. Sobre el buscador, la guía de Google indica que desde el punto de vista de Google Search no importa si los encabezados van fuera de orden, y que tampoco existe un número ideal; recomienda usarlos para ayudar a las personas a navegar y destaca que el orden semántico es muy útil para los lectores de pantalla. Para entender cómo se relacionan el título de la página y el h1, consulta las claves técnicas de SEO on page.

Div y span: cuándo sí y cuándo no

div y span son contenedores sin significado: el primero de bloque y el segundo en línea. No son un error, pero MDN recomienda usarlos solo cuando no exista una etiqueta semántica adecuada, porque abusar de ellos llena el código de ruido y dificulta el mantenimiento. Una página construida casi solo con div funciona, pero obliga a las tecnologías de apoyo y a quien programa después a adivinar qué es cada cosa.

El caso más claro son los botones. Un <button> real recibe el foco con el tabulador y se activa con Intro o con la barra espaciadora sin código adicional. Un div con un evento de clic no hace nada de eso salvo que se programe todo a mano. MDN lo resume así: lo mejor es usar el elemento adecuado desde el principio.

¿Quieres saber cómo está construida tu web por dentro?

Cuéntanos qué web tienes y te decimos qué revisaríamos primero: estructura, encabezados, formularios y accesibilidad.

Habla con un experto

Qué aporta de verdad el HTML semántico

Ámbito	Qué aporta	Qué dicen las fuentes
Accesibilidad	Estructura reconocible para lectores de pantalla y navegación con teclado.	WCAG 2.2 (Recomendación del W3C de diciembre de 2024) exige que la información y las relaciones que se muestran visualmente estén disponibles de forma programática (criterio 1.3.1) y que los encabezados describan el tema (criterio 2.4.6).
Buscadores	Una página más fácil de interpretar, sin garantía de resultados.	Google recomienda encabezados y textos descriptivos de enlaces e imágenes, pero indica que rara vez puede apoyarse en significados ocultos en la especificación HTML y que no hay atajos para salir el primero.
Mantenimiento	Plantillas más claras y cambios más rápidos.	MDN advierte de que el exceso de `div` añade ruido y complica el mantenimiento.
Experiencia de uso	Botones, formularios y menús que funcionan con teclado desde el principio.	MDN: los elementos nativos traen el comportamiento de teclado y el estilo por defecto; un `div` hay que programarlo.

La accesibilidad empieza por el HTML

El informe WebAIM Million 2026, que analizó un millón de páginas de inicio en febrero de 2026, detectó fallos de WCAG 2 en el 95,9 % de ellas, con una media de 56,1 errores por página. Seis categorías suman el 96 % de los errores, y todas se pueden prevenir con un marcado y un diseño cuidados:

Fallo más habitual	Páginas afectadas	Cómo se previene
Texto con poco contraste	83,9 %	Se corrige con CSS: colores con suficiente contraste frente al fondo.
Imágenes sin texto alternativo	53,1 %	Atributo `alt` descriptivo; `alt=""` si la imagen es decorativa.
Campos de formulario sin etiqueta	51 %	`<label for>` asociado al `id` del campo.
Enlaces vacíos	46,3 %	Texto del enlace que se entienda por sí solo, sin «pulsa aquí».
Botones vacíos	30,6 %	Texto visible o nombre accesible dentro de un `<button>`.
Idioma del documento sin indicar	13,5 %	Atributo `lang="es"` en la etiqueta `html`.

El propio informe recuerda que las herramientas automáticas no detectan todos los fallos, así que una revisión limpia no garantiza que la web sea accesible. Y MDN añade un consejo práctico: no pongas texto dentro de imágenes, porque no se puede leer, ampliar ni traducir con facilidad. Si quieres una introducción más amplia, lee qué es la accesibilidad web.

HTML nativo primero, ARIA después

ARIA es un conjunto de atributos que añaden información para las tecnologías de apoyo. Es útil cuando HTML no ofrece un elemento para lo que necesitas, pero no sustituye a las etiquetas nativas: según la guía de patrones ARIA del W3C, los roles ARIA no hacen que el navegador proporcione por sí solos el comportamiento de teclado ni los estilos de los elementos nativos, y un ARIA incorrecto puede dar una imagen falsa de lo que ocurre en pantalla.

Los datos van en esa línea. En el informe WebAIM Million 2026, las páginas con ARIA tenían de media 59,1 errores detectados frente a 42 en las que no lo usaban. El informe aclara que esto no demuestra que ARIA sea la causa, porque esas páginas también suelen ser más complejas, pero sí indica que más ARIA no equivale a más accesibilidad.

¿Y las inteligencias artificiales?

Es frecuente leer que el HTML semántico hace que los buscadores con IA entiendan mejor tu web. Una estructura clara facilita que cualquier programa que lea tu página identifique el contenido principal, los títulos y los enlaces, pero no hemos encontrado ninguna fuente oficial que garantice que usarla mejore tu presencia en esos sistemas, y no lo damos por hecho. Lo que sí podemos decir es que un contenido claro, bien organizado y accesible es una buena base en cualquier caso. Si te interesa cómo se enfocan hoy las respuestas de la IA, puedes leer cómo posicionar tu web en buscadores con IA y nuestra página sobre GEO para pymes.

Cómo revisar tu web en diez minutos

Navega solo con el teclado. Pulsa Tab: debes poder llegar al menú, a los botones y a los formularios, y ver siempre dónde está el foco.
Revisa los encabezados. Con las herramientas de desarrollo del navegador o una extensión, comprueba que hay un único h1 y que los niveles siguen un orden.
Mira las imágenes. Las informativas, con alt descriptivo; las decorativas, con alt="".
Comprueba los formularios. Cada campo debe tener su label asociado y el botón de envío debe ser un button real.
Lee los enlaces fuera de contexto. «Ver servicios de desarrollo web» se entiende; «pulsa aquí» no.
Comprueba el idioma. La etiqueta html debería llevar lang="es".
Pasa una auditoría automática, como la de accesibilidad de Lighthouse en las herramientas de desarrollo de Chrome, y revisa a mano lo que ella no puede ver.

Si quieres una primera revisión de otros aspectos de tu web, puedes probar nuestro analizador de webs, que es de uso libre y no sustituye a esta revisión de estructura. Para ver cómo se mide lo que ocurre después en Google, te servirá la guía de Google Search Console.

Qué revisar según el tipo de página

Página	Qué comprobar
Inicio	Un `h1` que diga qué haces y para quién, un `main` con secciones que empiecen por `h2` y un `nav` claro en la cabecera.
Servicio	El `h1` nombra el servicio; los `h2` organizan qué incluye, cómo se trabaja y las preguntas frecuentes; el botón de contacto es un enlace o botón real.
Contacto	Formulario con `label` en cada campo y datos de contacto escritos como texto, no dentro de una imagen.
Blog	Cada entrada es un `article` con su `h1` y sus `h2` en orden; las imágenes llevan texto alternativo.
Tienda online	Buscador y filtros dentro de `search`, botones de compra reales y encabezados que no se elijan por su tamaño.

Si tu web es nueva o vas a rehacerla, el cuestionario ¿Qué web necesito? te ayuda a decidir qué tipo de sitio encaja con tu negocio; y si ya tienes una, nuestra página de desarrollo web para pymes explica cómo trabajamos.

Errores frecuentes que conviene evitar

Botones hechos con div o con enlaces vacíos que no responden al teclado.
Encabezados elegidos por tamaño y niveles saltados.
Más de un main visible o un main dentro de otro bloque.
section usada como contenedor genérico, sin encabezado y solo para dar estilo.
Texto importante dentro de imágenes, como horarios o promociones.
ARIA añadida para tapar un marcado deficiente en lugar de corregirlo con la etiqueta adecuada.
Dar la estructura por buena porque «se ve bien»: lo que se ve en pantalla no garantiza lo que interpretan las tecnologías de apoyo.

Conclusión

El HTML semántico no hace que una web sea mejor por arte de magia ni sustituye a un buen contenido, pero es la base sobre la que se apoya todo lo demás: la accesibilidad, el mantenimiento y una estructura que las personas y los programas pueden entender. Es barato de hacer bien desde el principio y laborioso de arreglar al final, así que merece la pena revisarlo cuando encargas o renuevas tu web. Si quieres que revisemos cómo está construida la tuya, puedes contarnos tu caso por WhatsApp.

Preguntas frecuentes sobre el HTML semántico

¿Qué es el HTML semántico?

Es el uso de las etiquetas HTML que corresponden al significado de cada parte del contenido: un encabezado como encabezado, un menú como navegación, el contenido principal como principal y un botón como botón. Así, el navegador, las tecnologías de apoyo como los lectores de pantalla y los programas que leen la página pueden identificar para qué sirve cada elemento, y no solo cómo se ve.

¿Cuántos h1 debe tener una página?

Lo recomendable es uno que describa el contenido de la página, de forma parecida al título del documento. El estándar de HTML permite varios si no están anidados, pero MDN no lo considera una buena práctica. Además, conviene no saltarse niveles: después del h1 van los h2, y dentro de un h2 los h3.

¿El HTML semántico me posiciona mejor en Google?

No lo damos por seguro, y Google tampoco lo presenta como un atajo. Su guía de inicio indica que la web en general no es HTML válido, por lo que su buscador rara vez puede depender de significados ocultos en la especificación, y que no hay secretos para salir el primero. Lo que sí aporta es una página más fácil de entender, de mantener y de usar con teclado o lector de pantalla, algo que merece la pena por sí mismo.

¿Qué diferencia hay entre section, article y div?

Un article es un contenido autónomo que tendría sentido por sí solo, como una entrada de blog. Un section agrupa contenido de un mismo tema y normalmente lleva su encabezado. Un div no tiene significado propio: se usa como contenedor para dar estilo o comportamiento cuando ninguna otra etiqueta encaja.

¿Hace falta usar ARIA?

Primero conviene usar la etiqueta nativa que ya hace el trabajo, como button, nav o label. ARIA sirve para los casos en que HTML no ofrece lo que necesitas, y mal usado puede empeorar la experiencia: según el informe WebAIM Million 2026, las páginas con ARIA tenían de media más errores detectados, aunque el propio informe aclara que eso no prueba que ARIA sea la causa.

¿Mi web en WordPress ya es semántica?

Depende del tema, de los plugins y de cómo se haya maquetado cada página. Muchos temas incluyen cabecera, menú y pie con sus etiquetas, pero el contenido que se añade después puede romper la estructura, por ejemplo con encabezados elegidos por su tamaño. Lo fiable es revisarlo con los pasos de esta guía.

¿Se puede mejorar sin rehacer la web?

En muchos casos sí: se pueden corregir las plantillas y el contenido sin cambiar el diseño que ve el visitante. Cuánto trabajo supone depende de cómo esté construida la web, y por eso conviene revisarla antes de hablar de plazos o de presupuesto.

¿Para qué sirve la etiqueta search?

Marca el bloque que contiene los controles para buscar o filtrar contenido y crea de forma implícita una región de búsqueda para las tecnologías de apoyo, sin necesidad de añadir role="search". Según MDN, está disponible en todos los navegadores principales desde octubre de 2023.

Fuentes consultadas el 30 de octubre de 2026: HTML Standard (WHATWG), MDN: estructura de documentos, MDN: encabezados, MDN: elemento search, MDN: accesibilidad en HTML, Guía de inicio de SEO de Google Search Central, WebAIM Million 2026, WCAG 2.2 (W3C) y Guía de patrones ARIA (W3C).