<nav>

Description

L’élément <nav> représente une section de navigation contenant des liens. Il est réservé aux groupes de navigation importants — ne pas l’utiliser pour tout ensemble de liens (liste d’articles, liste de tags…). Une page peut contenir plusieurs <nav> (navigation principale, pagination, table des matières).

Syntaxe

<nav aria-label="Navigation principale">
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/articles">Articles</a></li>
  </ul>
</nav>

Exemples

Menu principal avec liste :

<nav aria-label="Navigation principale">
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/produits">Produits</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Fil d’Ariane :

<nav aria-label="Fil d'Ariane">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/blog">Blog</a></li>
    <li aria-current="page">Mon article</li>
  </ol>
</nav>

Notes

aria-label obligatoire en cas de multiples <nav> : si la page contient plusieurs zones de navigation, chacune doit avoir un aria-label ou aria-labelledby distinct pour que les lecteurs d’écran les différencient.

Liste ou pas de liste ? La convention recommande d’utiliser <ul>/<li> pour les menus de navigation, mais ce n’est pas une obligation. Un seul lien peut être dans <nav> sans liste.