Respuesta corta: el HTML semántico consiste en usar cada elemento HTML por lo que significa, no por cómo se ve: header, nav, main y footer para las partes de la página, de h1 a h6 para los encabezados, button para los botones. Los navegadores convierten ese significado en el árbol de accesibilidad que leen los lectores de pantalla.
Qué significa HTML semántico
Según web.dev, semántico quiere decir «relativo al significado», y el HTML semántico estructura el contenido según lo que significa cada elemento, no según su aspecto.
MDN pone de ejemplo el h1: le dice al navegador que su texto es el encabezado principal de la página. Puedes hacer que cualquier elemento parezca un encabezado, pero no tendrá ese significado. Como dice MDN, la presentación es responsabilidad exclusiva de CSS.
Cómo lo usan los navegadores y los lectores de pantalla
web.dev explica que el navegador construye el modelo de objetos del documento y el de CSS, y después un árbol de accesibilidad. Los lectores de pantalla usan ese árbol, que web.dev describe como una versión semántica del DOM.
Los elementos header y footer se convierten en las zonas de cabecera y de pie cuando no están dentro de otras zonas. Con un lector de pantalla se puede saltar entre ellas, y la guía del lector de pantalla lo muestra paso a paso.
Los elementos que más significado llevan
| Elemento | Qué les dice a navegadores y lectores de pantalla | Para qué usarlo |
|---|---|---|
| header | La cabecera de la página, si no está dentro de otra zona | El logo y el menú del sitio |
| nav | Un bloque de enlaces de navegación | El menú principal, con nombre si hay varios |
| main | El contenido principal de la página | Uno por página |
| footer | El pie de la página, si no está dentro de otra zona | Los datos de contacto y los enlaces legales |
| h1 a h6 | Encabezados que forman el esquema de la página | Normalmente un h1 y después de h2 a h6 sin saltar niveles |
| ul, ol | Una lista sin orden, o con orden | Ventajas, menús y pasos |
| button | Un control que hace algo, listo para el teclado | Abrir un menú o enviar un formulario |
De WebAIM, en inglés, y de web.dev y MDN, consultados el 5 de noviembre de 2026.
No todo grupo de enlaces necesita un nav, según WebAIM, y si una página tiene más de un nav, cada uno debe llevar su propio aria-label.
Cuándo un div está bien y cuándo no
web.dev dice que div y span son elementos sin valor semántico. Sirven para la maquetación y el estilo, siempre que el significado esté en los elementos que los rodean.
Un div usado como botón pierde el acceso con teclado que tiene un botón de verdad, y su estilo por defecto, como señala MDN. Recuperarlos exige un tabindex, un rol y código para las teclas.
Un botón de verdad ya funciona: se alcanza con Tab y se activa con Espacio o Enter. Nuestra guía de qué es ARIA explica cuándo un rol es la herramienta adecuada.
Cómo revisar tus páginas
- Comprueba que cada página tiene un main y, como la mayoría, un solo header y un solo footer.
- Comprueba que hay un solo h1 y que los encabezados de debajo no se saltan niveles; el primero tiene su propia guía de la etiqueta H1.
- Comprueba que cada control es un elemento button y cada enlace es un elemento a con href.
- Comprueba que las listas son elementos ul u ol, no párrafos que empiezan con un símbolo.
- Si una página tiene más de un nav, revisa que cada uno lleve su propio aria-label.
- Abre el árbol de accesibilidad en las herramientas para desarrolladores del navegador y lee las zonas y los encabezados que muestra.
- Prueba la página con el teclado y con un lector de pantalla; la parte del teclado está en nuestra guía de navegación con teclado.
Qué encontramos en nuestras páginas
El 5 de noviembre de 2026 miramos cómo están hechas nuestra portada, una de nuestras guías y nuestra página de contacto. Lo hicimos en los dos idiomas, a ancho de escritorio y de teléfono. Cada vista tenía una sola zona de cabecera, una principal y una de pie. Cada una tenía un solo h1 como primer encabezado, sin saltos de nivel debajo.
Todos los enlaces tenían href, ningún div ni span hacía de botón y todas las imágenes llevaban el atributo alt. En escritorio, la página de inicio usa 162 elementos div, y sirven para la maquetación, no para dar significado.
Faltaba un nombre. En computadora, una guía tenía cuatro zonas de navegación: tres tenían nombre, Ruta de navegación, Tabla de contenidos y Legal, pero el menú de la cabecera no. Lo llamamos «Principal», como en el ejemplo de WebAIM, y no cambió ni un píxel de las páginas.
Antes de publicar
- Cada página tiene un main, y un header y un footer de página.
- La página tiene un único h1 y ningún nivel de encabezado saltado.
- Los botones son elementos button y los enlaces son elementos a con href.
- Las listas están marcadas como listas.
- Cada nav tiene su propio nombre cuando hay más de uno.
- Ningún div ni span hace de control.
RecuerdaElige cada elemento por lo que significa y deja el aspecto a CSS. El significado de tu código es lo que leen los navegadores y los lectores de pantalla.
Construimos cada página sobre esta estructura en nuestro servicio de diseño web.
Respuestas rápidas sobre el HTML semántico
¿Qué es el HTML semántico?
Usar los elementos HTML por lo que significan, no por cómo se ven: un elemento button para un botón, nav para un menú, h2 para el título de una sección. web.dev lo define como estructurar el contenido según el significado de cada elemento, no según su aspecto.
¿Por qué importa el HTML semántico para la accesibilidad?
Los navegadores convierten los elementos semánticos en el árbol de accesibilidad que leen los lectores de pantalla. Un botón de verdad se alcanza con Tab y se pulsa con Espacio o Enter sin código extra, como explica MDN. Un div con aspecto de botón no tiene nada de eso.
¿Está mal usar elementos div?
No. Un div no tiene significado, así que sirve para la maquetación. Si un div sustituye a un botón, un encabezado o una lista, las tecnologías de apoyo no saben qué es, y te toca reconstruir su comportamiento.
¿Cuántos h1 debe tener una página?
WebAIM dice que una página normalmente debe tener un solo h1, que describe la página entera y se parece a su título. Los encabezados de h2 a h6 que siguen forman un esquema, así que no te saltes niveles al bajar por la página.
¿Todo grupo de enlaces debe ser un elemento nav?
No. WebAIM aconseja usar nav sobre todo para la navegación principal, no alrededor de cada lista de enlaces. Si una página tiene más de un nav, dale a cada uno su aria-label, como Principal o Ruta de navegación, para que quien usa un lector de pantalla los distinga.
Fuentes
Consultadas el 5 de noviembre de 2026. MDN Web Docs: HTML: Una buena base para la accesibilidad. web.dev: HTML semántico. En inglés: MDN Web Docs, Semantics; WebAIM, Semantic Structure: Regions, Headings, and Lists. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.