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.

HTML

<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 que contiene enlaces de navegación y define un punto de referencia de tipo navigation.

HTML

<nav aria-label="Principal">
  <a href="/inicio">Inicio</a>
  <a href="/servicios">Servicios</a>
  <a href="/contacto">Contacto</a>
</nav>

Una página puede incluir varios elementos <nav>, siempre que cada uno tenga un propósito claro (por ejemplo, navegación secundaria). En ese caso debemos identificar cada elemento con un atributo ARIA, como aria-label, para describir su función.

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.

HTML

<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.

HTML

<aside>
  <h3>Artículos relacionados</h3>
  ...
</aside>

Secciones

El elemento <section> sirve para agrupar contenido relacionado con un mismo tema.

Normalmente, cada sección se identifica con un encabezado (h1-h6).

Las secciones tienen por defecto un role="generic". Para destacar una sección, incluye un nombre accesible que describa su contenido. De esta forma se presentará con role="region" y será reconocida como un punto de referencia por las tecnologías de asistencia.

HTML

<section aria-labelledby="news">
  <h2 id="news">Noticias</h2>
  <p>...</p>
</section>

Para agrupar contenido únicamente con fines de estilo, utiliza 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>).

HTML

<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>.

HTML

<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 y equivale a un elemento con role="search".

Pie de página

Para representar el pie de página usamos el elemento <footer>.

HTML

<footer>
  <p>&copy; 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.