HTML
Cómo estructurar las regiones principales de una página con header, nav, main, aside y footer para mejorar navegación, semántica y accesibilidad.
Los landmarks dividen una página en regiones importantes que pueden recorrerse rápidamente mediante tecnologías de asistencia.
<header>...</header>
<nav aria-label="Principal">...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer><header>
<a href="/">Nicolás Garzón</a>
<nav aria-label="Principal">...</nav>
</header>Representa contenido introductorio o ayudas de navegación para su sección ancestral.
Puede existir:
Un header anidado no siempre se expone como banner landmark; el contexto importa.
<nav aria-label="Principal">
<ul>...</ul>
</nav>Representa una sección con enlaces principales de navegación.
No todos los grupos de links necesitan nav. Una lista de enlaces legales dentro de un footer puede ser suficiente sin crear otra región si no aporta navegación significativa.
<nav aria-label="Principal">...</nav>
<nav aria-label="Proyectos">...</nav>
<nav aria-label="Pie de página">...</nav>Cuando existen varias regiones nav, dales nombres que permitan distinguirlas.
No repitas la palabra “navegación” innecesariamente en el label; el rol ya se anuncia.
<main id="main-content">
<h1>Portfolio</h1>
</main>Contiene el contenido principal único de la vista.
No coloques main dentro de article, aside, header, footer o nav. Normalmente debe existir uno activo y visible.
<aside aria-labelledby="related-title">
<h2 id="related-title">Proyectos relacionados</h2>
...
</aside>Representa contenido indirectamente relacionado con el contenido cercano o con la página completa.
No significa “columna derecha”. Su posición visual es CSS.
<footer>
<p>© 2026 Nicolás Garzón</p>
</footer>Representa información sobre su sección: autor, enlaces relacionados, copyright o metadata editorial.
Puede existir un footer global y footers de articles.
Un header descendiente directo apropiado de body suele aportar banner. Un footer global suele aportar contentinfo.
No añadas manualmente role="banner" o role="contentinfo" cuando HTML nativo ya crea la semántica correcta.
El elemento search agrupa controles o contenido relacionado con búsqueda:
<search>
<form role="search">
<label for="site-search">Buscar</label>
<input id="site-search" name="q" type="search">
<button>Buscar</button>
</form>
</search>El soporte y mapeo accesible pueden evolucionar; un form con role="search" sigue siendo un patrón ampliamente reconocido cuando necesitas una región de búsqueda.
<a class="skip-link" href="#main-content">
Saltar al contenido principal
</a>Permite evitar navegación repetitiva. El destino debe poder recibir o mostrar foco de forma útil cuando se activa.
Los landmarks deben aparecer en un orden lógico en el source. No uses CSS para presentar una secuencia visual completamente distinta del orden de lectura y foco.
<section aria-label="Tarjeta 1">...</section>
<section aria-label="Tarjeta 2">...</section>
<section aria-label="Tarjeta 3">...</section>Demasiados landmarks dificultan la navegación. Nombra regiones cuando representan áreas relevantes, no cada contenedor.
<article>
<header>
<h2>Cómo construí DomiSys</h2>
<p>Publicado el <time datetime="2026-07-23">23 de julio</time></p>
</header>
<p>...</p>
<footer>
<p>Escrito por Nicolás Garzón.</p>
</footer>
</article>El contexto cambia el significado de header y footer.
<body>
<a class="skip-link" href="#main-content">Saltar al contenido</a>
<header>
<a href="/">Nicolás Garzón</a>
<nav aria-label="Principal">...</nav>
</header>
<main id="main-content">
<h1>Proyectos</h1>
...
</main>
<footer>
<p>Disponible para nuevos proyectos.</p>
</footer>
</body>¿Por qué un sidebar visual no siempre debe utilizar aside?
Porque aside depende de la relación semántica del contenido, no de su posición. Un sidebar que contiene navegación principal podría ser nav; uno con contenido central podría no ser aside.
Section, article, search y address diferencia unidades temáticas, contenido independiente y datos de contacto.