Saltar al contenido principal

Estructura de página

Las etiquetas estructurales de HTML, junto a los atributos ARIA landmark roles, permiten identificar cada región de una página facilitando la navegación.

Cabecera principal

Para marcar la cabecera de la página usamos el elemento header junto al rol banner.

HTML
<header role="banner">
...
</header>

Nota: El rol banner sirve para especificar que se trata de contenido orientado al sitio (ejemplo: logo, buscador…) ya que el elemento header puede utilizarse en otras partes de la página, como un artículo, por ejemplo.

El elemento nav representa una sección con enlaces de navegación. Se rol equivalente es navigation.

HTML
<nav role="navigation">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

Contenido principal

Identificamos el contenido principal de un documento con el elemento main. Su rol equivalente es main.

HTML
<main role="main">
  <h1>Título principal</h1>
  ...
</main>

Contenido complementario

Se considera contenido complementario a cualquier información relacionada con el contenido principal. Por ejemplo, la biografía del autor, o un grupo de artículos relacionados.

Se representa con el elemento aside generalmente acompañado del rol complementary, aunque puede tener otros roles como search, note o presentation dependiendo de su función.

HTML
<aside role="complementary">
  <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).

HTML
<section>
  <h1>Noticias internacionales</h1>
  <p>...</p>
</section>

Nota: No hay que utilizar section como contenedor genérico. Para agrupar contenidos con el objetivo de darles estilo, hay que utilizar el elemento div.

Artículos

El elemento article identifica contenido de un sitio web que puede ser publicado o distribuido de forma independiente. Esto puede ser una entrada de un blog, un artículo de una revista o un mensaje en un foro, por poner algunos ejemplos.

El elemento article puede contener a su vez otros elementos estructurales como header o footer e incluso diferentes secciones (section).

HTML
<article class="entry-blog">
  <h2>Título del artículo</h2>
  <p>...</p>
  <footer>
    <p>Publicado el <time datetime="2016-11-03 11:00">03 de Noviembre</time> por John Doe</p>
  </footer>
</article>

Búsqueda

La sección de búsqueda se identifica con el rol search dentro de un elemento div (no existe etiqueta HTML para este rol).

HTML
<form action="…">
  <div role="search">
    <input type="search" aria-label="Buscar">
    <button type="submit">Buscar</button>
  </div>
</form>

Pie de página

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

El rol contentinfo se añade para indicar que contiene información sobre la página en general y distinguirlo de otros usos de <footer>, como el pie de un artículo, por ejemplo.

HTML
<footer role="contentinfo">
  <p>&copy; 2016 Nombre empresa</p>
</footer>