<nav> : l'élément de section de navigation

L'élément HTML <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).

Exemple interactif

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="#">Bikes</a></li>
    <li class="crumb"><a href="#">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>
  This BMX bike is a solid step into the pro world. It looks as legit as it
  rides and is built to polish your skills.
</p>

nav {
  border-bottom: 1px solid black;
}

.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a::after {
  display: inline-block;
  color: #000;
  content: ">";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

Attributs

Cet élément ne possède que les attributs universels.

Notes d'utilisation

Tous les liens d'un document ne doivent pas faire partie d'un élément <nav>. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément <footer> possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément <nav>.
Un document peut avoir plusieurs éléments <nav>, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page. L'attribut aria-labelledby pourra être utilisé afin d'améliorer l'accessibilité.
Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation.

Exemples

HTML

html

<nav class="menu">
  <ul>
    <li><a href="#Accueil">Accueil</a></li>
    <li><a href="#Apropos">À propos</a></li>
    <li><a href="#Contact">Contact</a></li>
  </ul>
</nav>

Résultat

Résumé technique

Catégories de contenu	Contenu de flux, contenu sectionnant, contenu tangible.
Contenu autorisé	Contenu de flux.
Omission de balises	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés	Tout élément acceptant du contenu de flux.
Rôles ARIA autorisés	Aucun
Interface DOM	`HTMLElement`

Spécifications

Compatibilité des navigateurs

Voir aussi

Les autres éléments HTML en relation avec les sections : <body>, <article>, <section>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <header>, <footer>, <address>
Plan et section d'un document HTML5
ARIA : le rôle navigation

<nav> : l'élément de section de navigation

In this article