Estructura de página
Organiza el documento en partes lógicas con la ayuda de los elementos estructurales de HTML.
Cabecera
La cabecera de una página web se representa mediante el elemento
header
y define un punto de referencia de tipo
banner
.
<header>
<img src="logo.svg" alt="Web Accesible - Inicio">
...
</header>
Este tipo de contenido se sitúa generalmente al principio de la página y está orientado al sitio web en general.
Ejemplos del contenido de tipo
banner
:
- Logo
- Navegación principal
- Buscador
Nota:
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>
<ul>
<li><a href="/inicio">Inicio</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
El menú de navegación debería estar situado al principio del documento, aunque podemos cambiar visualmente su ubicación mediante CSS.
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>
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>
Nota:
Evita utilizar
section
como contenedor genérico. Para agrupar contenidos con el objetivo de darles 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>
Búsqueda
Un punto de referencia de búsqueda se define usando el rol
search
(no existe etiqueta HTML para este rol).
<form role="search">
<input type="search" aria-label="Buscar">
<button type="submit">Buscar</button>
</form>
Pie de página
Para representar el pie de página usamos el elemento
footer
.
<footer>
<p>© 2022 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.
Comprobación
Al identificar cada sección de una página con la etiqueta adecuada, estamos ofreciendo puntos de referencia (landmarks) que facilitan la navegación a las tecnologías de apoyo.
Puedes comprobar los puntos de referencia de una página web con una extensión del navegador como Landmarks.