<nav> : l'élément de section de navigation
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <nav> représente une section d'une page dont le but est de fournir des liens de navigation, soit au sein du document courant, soit vers d'autres documents. Des exemples courants de sections de navigation sont les menus, les tables des matières et les index.
Exemple interactif
<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">Vélos</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>
Ce vélo BMX est une étape solide vers le monde professionnel. Il a l'apparence
et la performance d'un vrai BMX et est conçu pour perfectionner vos
compétences.
</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: black;
content: ">";
font-size: 80%;
font-weight: bold;
padding: 0 3px;
}
Attributs
Cet élément inclut uniquement les attributs universels.
Notes d'utilisation
- Il n'est pas nécessaire que tous les liens soient contenus dans un élément
<nav>.<nav>est destiné uniquement à un bloc principal de liens de navigation ; typiquement, l'élément<footer>contient souvent une liste de liens qui n'ont pas besoin d'être dans un élément<nav>. - Un document peut comporter plusieurs éléments
<nav>, par exemple un pour la navigation du site et un autre pour la navigation interne à la page.aria-labelledbypeut être utilisé dans ce cas pour améliorer l'accessibilité, voir l'exemple. - Les agents utilisateur·ice·s, tels que les lecteurs d'écran destinés aux personnes en situation de handicap, peuvent utiliser cet élément pour déterminer s'il faut omettre le rendu initial du contenu réservé à la navigation.
Exemples
Dans cet exemple, un bloc <nav> est utilisé pour contenir une liste non ordonnée (<ul>) de liens. Avec une feuille de style CSS appropriée, cela peut être présenté comme une barre latérale, une barre de navigation ou un menu déroulant.
<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>
La sémantique de l'élément nav est de fournir des liens. Cependant, un élément nav n'a pas besoin de contenir une liste, il peut aussi contenir d'autres types de contenu. Dans ce bloc de navigation, les liens sont fournis dans du texte :
<nav>
<h2>Navigation</h2>
<p>
Vous êtes sur ma page d'accueil. Au nord se trouve
<a href="/blog">mon blog</a>, d'où l'on entend les bruits de bataille. À
l'est, vous pouvez voir une grande montagne, sur laquelle de nombreux
<a href="/school">devoirs scolaires</a> sont éparpillés. Tout en haut de
cette montagne, vous pouvez apercevoir une petite silhouette qui semble être
moi, en train de rédiger désespérément une
<a href="/school/thesis">thèse</a>.
</p>
<p>
À l'ouest se trouvent plusieurs sorties. Une sortie amusante est intitulée
<a href="https://games.example.com/">« jeux »</a>. Une autre
sortie, plus ennuyeuse, est intitulée
<a href="https://isp.example.net/">ISP™</a>.
</p>
<p>
Au sud se trouve une <a href="/about">page de contacts</a> sombre et humide.
Des toiles d'araignée recouvrent son entrée désaffectée, et à un moment
donné, vous voyez un rat sortir rapidement de la page.
</p>
</nav>
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ôle ARIA implicite |
navigation
|
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-nav-element |