La balise <nav> est utilisée en HTML pour définir une section de navigation dans un document.
Elle est généralement utilisée pour regrouper des liens de navigation qui permettent aux utilisateurs de se déplacer facilement dans un site web.
Structure et syntaxe de la balise <nav>
Structure et syntaxe de base
Voici la syntaxe de base d’une balise <nav> :
<nav>
Contenu de la navigation ici
</nav>
Exemple d’utilisation
Voici un exemple typique de navigation :
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Dans cet exemple, la balise <nav> est utilisée pour regrouper des liens de navigation sous forme de liste non ordonnée.
Attributs
La balise <nav> accepte les attributs HTML classiques comme :
class: pour appliquer des styles CSS.id: pour identifier un conteneur unique.style: pour appliquer des styles inline.
Bonnes pratiques
Utilisez la balise <nav> pour organiser et structurer les éléments de navigation sur votre site web. Cela permet d’améliorer l’accessibilité en fournissant aux moteurs de recherche et aux lecteurs d’écrans un moyen de localiser rapidement la navigation.
Évitez d'utiliser <nav> pour des éléments de navigation qui sont non essentiels ou répétitifs. Par exemple, ne l’utilisez pas pour des liens de navigation dans des sections non principales comme des pieds de page ou des menus internes comme les onglets d'un profil utilisateur par exemple.
Différence avec d’autres balises similaires
<header>: La balise<header>est utilisée pour définir l’en-tête d’un document, qui peut inclure des éléments comme le logo et le titre du site, tandis que<nav>est spécifiquement destiné aux liens de navigation.<footer>: La balise<footer>est utilisée pour le pied de page, généralement pour des informations légales et de contact, alors que<nav>est dédiée à la navigation du site.
Compatibilité des navigateurs
La balise <nav> est prise en charge par tous les navigateurs modernes.
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Oui |