En los artículos anteriores vimos la estructura general de un documento HTML, qué papel tiene el elemento <head> y cómo el <body> representa el contenido con el que el usuario interactúa.
En este artículo vamos a profundizar en cómo se organiza ese contenido dentro del <body> para que sea comprensible, navegable y accesible: hablaremos de landmarks (regiones), de secciones y de encabezados. La idea es construir una página que no solo se vea bien, sino que esté estructurada de forma que un lector de pantalla, un teclado o cualquier tecnología de asistencia pueda recorrerla como si fuese un mapa.
Estructura dentro del body
Cuando una página crece (menú, buscador, contenido, barras laterales, pie, etc.), el usuario necesita referencias para no perderse.
Visualmente se resuelve con columnas, cajas, colores y tamaños de letra. Pero para accesibilidad lo importante es la semántica, es decir: qué es cada zona y qué función cumple.
Para eso HTML nos ofrece elementos para definir regiones (<header>, <nav>, <main>, <footer>, <aside>), elementos para definir secciones (<article>, <section>) y encabezados: <h1> … <h6> para expresar jerarquía y permitir navegación por títulos de los contenidos.
Cuando se usan bien estas piezas, muchos lectores de pantalla permiten saltar por regiones (landmarks) y por encabezados de forma inmediata. Además, las herramientas de ayuda a la navegación para personas con discapacidad cognitiva entienden mejor la estructura de los contenidos y pueden ofrecer una mejor asistencia a los usuarios con discapacidad.
Landmarks
Los landmarks (regiones) son zonas del documento lo bastante importantes como para que el usuario quiera ir directamente a ellas (por ejemplo: navegación, contenido principal, pie).
A nivel técnico, se exponen como roles/landmarks en el árbol de accesibilidad.
En HTML moderno, muchos landmarks se consiguen sin ARIA, solo usando elementos semánticos:
• <header> (a nivel de página) suele exponerse como banner.
• <nav> como navigation.
• <main> como main.
• <aside> como complementary (contenido complementario).
• <footer> (a nivel de página) como contentinfo.
Importante matiz: el contexto importa. Por ejemplo, un <header> dentro de un <article> deja de ser landmark banner y pasa a ser un contenedor genérico, precisamente para evitar ruido y duplicidades.
Ejemplo de una estructura típica con landmarks y secciones
El siguiente ejemplo presenta una plantilla mental de cómo dividir una página en regiones y cómo dar sentido a cada bloque.
<body>
<a class=skip-link href=#contenido>Saltar al contenido principal</a>
<header>
<h1>Programar a ciegas</h1>
<p>Accesibilidad, usabilidad y desarrollo.</p>
</header>
<nav aria-label=Navegación principal>
<a href=/>Inicio</a>
<a href=/articulos/>Artículos</a>
<a href=/contacto/>Contacto</a>
</nav>
<main id=contenido>
<article>
<header>
<h2>Estructura del contenido en HTML</h2>
<p>Publicado el 1/01/2026</p>
</header>
<section>
<h3>¿Qué son los landmarks?</h3>
<p>
Los landmarks son regiones que ayudan a moverse por la página sin leerla de forma lineal.
</p>
</section>
<section>
<h3>Encabezados y jerarquía</h3>
<p>
Los encabezados crean un mapa del contenido y permiten saltar por secciones.
</p>
</section>
</article>
</main>
<aside aria-label=Contenido relacionado>
<h2>Artículos relacionados</h2>
<ul>
<li><a href=/?p=1331>Introducción a HTML</a></li>
<li><a href=/?p=1332>El head de una página HTML</a></li>
<li><a href=/?p=1344>El body de una página HTML</a></li>
</ul>
</aside>
<footer>
<p>© 2026 Tyflos Accessible Software</p>
<a href=/accesibilidad/>Declaración de accesibilidad</a>
</footer>
</body>
Este ejemplo presenta los siguientes elementos clave:
- Hay un enlace de salto (Saltar al contenido principal).
- Hay un solo <main>, con un id para que el salto sea real.
- La navegación principal está en <nav> y está etiquetada con aria-label para que, si en el futuro hay más de una navegación, podamos diferenciarlas.
- El contenido principal está dentro de un <article> y dividido en <section> con encabezados.
El enlace para Saltar al contenido
Cuando una web repite cabecera y navegación en todas las páginas, un usuario que navega con teclado o lector de pantalla se encuentra siempre el mismo bloque antes de llegar al contenido real. WCAG exige un mecanismo para saltar bloques repetidos (criterio 2.4.1).
Un enlace de salto es la solución más habitual y sencilla.
Es opcional si ese enlace está siempre visible o si solo se muestra al recibir foco (lo habitual en muchos sitios).
Secciones
La estructuración en secciones y sub secciones definen la ordenación cognitiva general de los contenidos en una página web. Se suelen recomendar las siguientes reglas:
- Usar <article> cuando el bloque tenga sentido por sí solo (una entrada de blog, una noticia, un comentario, una tarjeta de producto completa).
- Usar <section> cuando se esté dividiendo un contenido en partes temáticas, normalmente con su propio encabezado.
- Ambos elementos crean secciones en el documento y definen el alcance de cosas como <header> y <footer> internos.
- No usar <section> como sustituto de <div>. Si no hay una sección temática real (y normalmente un encabezado que la titule), probablemente ese bloque sea un <div>.
Encabezados
Para una persona con discapacidad para el acceso a los contenidos digitales, como una persona ciega, los encabezados no son texto grande, más bien son un mecanismo de navegación y orientación.
Los encabezados definen la estructura de dependencias entre contenidos.
Un encabezado marca el comienzo de una sección dentro de los contenidos de la página.
Se suelen aplicar las siguientes reglas:
- Siempre debe haber, al menos, un H1 en la página.
- Dentro del contenido del encabezado sólo debe haber texto o una imagen.
- Ese texto o imagen debe representar el contenido que presenta el encabezado.
- Nunca se debe usar encabezados para estilo visual.
- Nunca se debe saltar niveles sin necesidad (por ejemplo, pasar de <h1> a <h4> porque sí).
Buenas prácticas para no crear ruido
Cuando se empieza a usar landmarks y ARIA, es fácil excederse en su uso. Un abuso o el renombrado excesivo de las regiones generan ruido y dificultan entender la página.
Se recomienda seguir estas reglas:
- Un solo <main> por página.
- Si hay varios <nav>, Es necesario poner nombre con aria-label (por ejemplo: Navegación principal, Navegación secundaria, Navegación de pie).
- Se debe evitar crear regiones sin una razón semántica.
- Usar <aside> para contenido complementario real (relacionado, pero no parte del hilo principal).
Cómo comprobar si la estructura es accesible
Se pueden detectar muchos fallos con herramientas automáticas, pero lo más fiable es realizar una verificación manual utilizando un lector de pantallas.
El lector de pantallas tiene una función para mostrar la estructura de encabezados en la página. De esta forma se puede observar si respetan el orden de anidamiento y si cuentan cómo se organiza el contenido en la página.
El lector de pantallas, por defecto, avisa cuando se ha encontrado una región (landmark). Es necesario revisar si aparecen regiones para la Navegación, Contenido principal, Pie, etc., y si tienen nombres claros cuando hay varias del mismo tipo.