Estructura de página
Organiza el contenido en partes lógicas con elementos estructurales de HTML.
Al identificar cada región de una página con elementos semánticos de HTML, ofrecemos puntos de referencia (landmarks) que facilitan la navegación a las tecnologías de asistencia.
Cabecera
La cabecera de una página web se representa mediante el elemento <header> y define un punto de referencia de tipo banner. Este rol indica que se trata del encabezado principal del sitio.
<header>
<img src="logo.svg" alt="Web Accesible - Inicio" />
...
</header>Este contenido suele situarse al inicio de la página y se relaciona con el sitio web en general, no con una sección específica.
Ejemplos de contenido de la cabecera:
- Logo
- Navegación principal
- Buscador
Cuando el elemento header está dentro de otro elemento estructural como <article>, <aside>, <main>, <nav> o <section>, no se considera como banner.
Navegación
El elemento <nav> representa una sección con enlaces de navegación y define un punto de referencia de tipo navigation.
<nav>
<a href="/inicio">Inicio</a>
<a href="/servicios">Servicios</a>
<a href="/contacto">Contacto</a>
</nav>En una misma página puede haber varios elementos nav, siempre que cada uno tenga un propósito claro (por ejemplo, navegación secundaria o enlaces sociales)
Contenido principal
Identificamos el contenido principal de un documento con el elemento <main>. Este es el contenido único de cada página, a diferencia de otras secciones como la cabecera o el pie de página que suelen repetirse.
<main>
<h1>Contenido principal</h1>
...
</main>Solo debe haber un elemento <main> por página y no debe anidarse dentro de otros elementos como <article>, <aside> o <section>.
Contenido complementario
Se considera contenido complementario cualquier información relacionada con el contenido principal, por ejemplo, la biografía del autor de un artículo, o un grupo de artículos relacionados.
Se representa con el elemento <aside> y define un punto de referencia de tipo complementary.
<aside>
<h3>Artículos relacionados</h3>
...
</aside>Secciones
El elemento <section> sirve para agrupar contenido relativo a un mismo tema.
Normalmente cada sección se identifica con un encabezado (h1-h6).
<section>
<h2>Noticias internacionales</h2>
<p>...</p>
</section>Evita utilizar <section> como contenedor genérico. Para agrupar contenidos con el objetivo de aplicar estilo, usa el elemento<div>.
Artículos
El elemento <article> identifica contenido de un sitio web que puede ser publicado o distribuido de forma independiente. Este contenido puede ser, por ejemplo, un artículo de un blog o un producto de una tienda online.
El elemento article puede contener a su vez otros elementos estructurales como <header> o <footer> e incluso diferentes secciones (<section>).
<article>
<h2>Título del artículo</h2>
<p>...</p>
<footer>
<p>Publicado el 03 de noviembre por Juan Pérez</p>
</footer>
</article>A diferencia de <section>, un <article> tiene sentido por sí solo, incluso fuera del contexto de la página.
Búsqueda
Un punto de referencia de búsqueda se define usando el elemento <search>.
<search>
<form>
<input type="search" aria-label="Buscar" />
<button type="submit">Buscar</button>
</form>
</search>El elemento <search> está bien soportado en los navegadores modernos. Sin embargo, su impacto en accesibilidad es similar al de un formulario con role="search", por lo que este último sigue siendo una alternativa válida y con un comportamiento más consistente en tecnologías de asistencia.
Pie de página
Para representar el pie de página usamos el elemento <footer>.
<footer>
<p>© 2025 Corporación Acme</p>
</footer>El elemento <footer> define un punto de referencia del tipo contentinfo siempre que descienda directamente del elemento <body>.
El rol contentinfo indica que se trata de información sobre el sitio web, como el copyright o enlaces a políticas de privacidad.
Puedes comprobar los puntos de referencia de una página web con una extensión del navegador como Landmarks.