{"id":1348,"date":"2026-02-27T07:00:00","date_gmt":"2026-02-27T06:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1348"},"modified":"2026-02-20T06:55:10","modified_gmt":"2026-02-20T05:55:10","slug":"estructura-del-contenido-en-una-pagina-html","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1348","title":{"rendered":"Estructura del contenido en una p\u00e1gina HTML"},"content":{"rendered":"

En los art\u00edculos anteriores vimos la estructura general de un documento HTML<\/a>, qu\u00e9 papel tiene el elemento <head><\/a> y c\u00f3mo el <body><\/a> representa el contenido con el que el usuario interact\u00faa.<\/p>\n

En este art\u00edculo vamos a profundizar en c\u00f3mo 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\u00e1gina que no solo se vea bien, sino que est\u00e9 estructurada de forma que un lector de pantalla, un teclado o cualquier tecnolog\u00eda de asistencia pueda recorrerla como si fuese un mapa.<\/p>\n

Estructura dentro del body<\/h2>\n

Cuando una p\u00e1gina crece (men\u00fa, buscador, contenido, barras laterales, pie, etc.), el usuario necesita referencias para no perderse.<\/p>\n

Visualmente se resuelve con columnas, cajas, colores y tama\u00f1os de letra. Pero para accesibilidad lo importante es la sem\u00e1ntica, es decir: qu\u00e9 es cada zona y qu\u00e9 funci\u00f3n cumple.<\/p>\n

Para eso HTML nos ofrece elementos para definir regiones (<header>, <nav>, <main>, <footer>, <aside>), elementos para definir secciones (<article>, <section>) y encabezados: <h1> \u2026 <h6> para expresar jerarqu\u00eda y permitir navegaci\u00f3n por t\u00edtulos de los contenidos.<\/p>\n

Cuando se usan bien estas piezas, muchos lectores de pantalla permiten saltar por regiones (landmarks) y por encabezados de forma inmediata. Adem\u00e1s, las herramientas de ayuda a la navegaci\u00f3n para personas con discapacidad cognitiva entienden mejor la estructura de los contenidos y pueden ofrecer una mejor asistencia a los usuarios con discapacidad.<\/p>\n

Landmarks<\/h2>\n

Los landmarks (regiones) son zonas del documento lo bastante importantes como para que el usuario quiera ir directamente a ellas (por ejemplo: navegaci\u00f3n, contenido principal, pie).<\/p>\n

A nivel t\u00e9cnico, se exponen como roles\/landmarks en el \u00e1rbol de accesibilidad.<\/p>\n

En HTML moderno, muchos landmarks se consiguen sin ARIA, solo usando elementos sem\u00e1nticos:
\u2022 <header> (a nivel de p\u00e1gina) suele exponerse como banner.
\u2022 <nav> como navigation.
\u2022 <main> como main.
\u2022 <aside> como complementary (contenido complementario).
\u2022 <footer> (a nivel de p\u00e1gina) como contentinfo.<\/p>\n

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\u00e9rico, precisamente para evitar ruido y duplicidades.<\/p>\n

Ejemplo de una estructura t\u00edpica con landmarks y secciones<\/h3>\n

El siguiente ejemplo presenta una plantilla mental de c\u00f3mo dividir una p\u00e1gina en regiones y c\u00f3mo dar sentido a cada bloque.<\/p>\n

<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\u00f3n principal>
<a href=\/>Inicio<\/a>
<a href=\/articulos\/>Art\u00edculos<\/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>\u00bfQu\u00e9 son los landmarks?<\/h3>
<p>
Los landmarks son regiones que ayudan a moverse por la p\u00e1gina sin leerla de forma lineal.
<\/p>
<\/section>

<section>
<h3>Encabezados y jerarqu\u00eda<\/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\u00edculos relacionados<\/h2>
<ul>
<li><a href=\/?p=1331>Introducci\u00f3n a HTML<\/a><\/li>
<li><a href=\/?p=1332>El head de una p\u00e1gina HTML<\/a><\/li>
<li><a href=\/?p=1344>El body de una p\u00e1gina HTML<\/a><\/li>
<\/ul>
<\/aside>

<footer>
<p>&copy; 2026 Tyflos Accessible Software<\/p>
<a href=\/accesibilidad\/>Declaraci\u00f3n de accesibilidad<\/a>
<\/footer>

<\/body><\/pre>\n
Este ejemplo presenta los siguientes elementos clave:<\/p>\n