<nav>
Un bloc de liens de navigation principaux : menu, sommaire, fil d’Ariane.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux sans élément
<main>
Exemple
#<nav aria-label="Fil d’Ariane">
<ol>
<li><a href="/">Accueil</a></li>
<li><a href="/fr/documentation">Documentation</a></li>
<li aria-current="page">HTML</li>
</ol>
</nav>Définition et utilisation
#L’élément <nav> marque un groupe de liens qui servent à se déplacer dans le site ou dans la page actuelle : le menu principal, le fil d’Ariane, un sommaire, une pagination.
Tout groupe de liens n’est pas forcément une navigation. Les liens vers les conditions d’utilisation dans un pied de page, ou une liste de tags sous un article, n’ont généralement pas besoin de <nav>. Réservez-le aux blocs de navigation principaux.
S’il y a plusieurs éléments <nav> sur une page, donnez un nom à chacun avec aria-label, par exemple « Principale » et « Fil d’Ariane ». Un lecteur d’écran annoncera alors de quelle navigation il s’agit.
Syntaxe
#<nav aria-label="Nom de la navigation">
…
</nav>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
nav {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Les liens d’un menu se présentent le plus souvent comme une liste
<ul>ou<ol>. Un lecteur d’écran annoncera alors le nombre d’éléments. - Marquez la page actuelle avec l’attribut
aria-current="page".
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.