Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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émentHTML<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> <ol> <li><a href="#">Vélos</a></li> <li><a href="#">BMX</a></li> <li>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 lesattributs 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é, voirl'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> <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émentnav est de fournir des liens. Cependant, un élémentnav 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 ducontenu de flux. |
| Rôle ARIA implicite | navigation |
| Rôles ARIA autorisés | Aucunrole autorisé |
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-nav-element |