Saltar al contenido principal

Ubicación

Proporciona información al usuario acerca de dónde se encuentra dentro de un sitio web.

Indicar la ubicación en la navegación

Orienta al usuario indicando visualmente dónde está mediante la interfaz de navegación.

Barra de navegación de Twitter

Esta técnica resulta especialmente útil cuando se trata de pasos dentro de un proceso, como el registro en un sitio web o una compra online.

Nota: Además de la indicación visual, la navegación debe estar estructurada semánticamente y, en caso necesario, proporcionar una alternativa textual.

Migas de pan

Las migas de pan (breadcrumbs en inglés) son un grupo de enlaces colocados en línea, que indican el camino para llegar a la página actual o su situación en la jerarquía del sitio.

Ejemplo
HTML
<nav aria-label="Estás en:">
    <ol class="breadcrumb">
        <li><a href="/">Inicio</a></li>
        <li><a href="/pagina1.html">Página 1</a></li>
        <li>Página 1a</li>
    </ol>
</nav>

Las migas de pan deben cumplir los siguientes requisitos:

  • Deben situarse siempre en el mismo lugar en todas las páginas.

  • Se deben maquetar utilizando listas (preferentemente listas ordenadas, porque existe un orden de sucesión o de jerarquía entre los elementos).

  • Deben ser enlaces, excepto la que indica la ubicación actual.

  • Hay que utilizar separadores visuales entre cada una de ellas.

Nota: Las migas de pan se pueden incluir dentro del elemento nav, ya que se trata de una sección de la página con enlaces de navegación.

El elemento link permite describir la relación que existe entre una página y el resto dentro de una colección.

El tipo de relación se indica mediante el atributo rel que puede tener los siguientes valores:

  • Start: Se refiere al primer documento dentro de una colección.
  • Next: Se refiere al siguiente documento en una serie ordenada.
  • Prev: Se refiere al documento anterior en una serie ordenada.
  • Contents: Se refiere a un documento que sirve como tabla de contenidos.
  • Index: Se refiere a un documento que proporciona un índice para el documento actual.
HTML
<link rel="contents" href="contenidos.html" title="Tabla de contenidos">
<link rel="index" href="indice.html" title="Índice">
<link rel="prev" href="capitulo01.html" title="01. El origen">
<link rel="next" href="capitulo02.html" title="02. La vida">

Nota: El elemento linkse incluye dentro de la sección head al principio del documento.