Structure & Accessibilité
Qu’est-ce que Balise nav ?
Élément sémantique HTML5 <nav> qui regroupe les liens de navigation principaux (menu principal, menu secondaire, fil d’Ariane).
Définition simple
C'est comme regrouper tous les panneaux « entrée, sortie, parking » dans un même hall : la navigation reste visible, mais distincte des bureaux où se traite le fond du sujet. Élément sémantique HTML5 <nav> qui regroupe les liens de navigation principaux (menu principal, menu secondaire, fil d’Ariane). Plusieurs blocs <nav> par page sont autorisés ; il est recommandé de les identifier via aria-label pour les distinguer (ex. « Navigation principale », « Fil d’Ariane »). Les lecteurs d’écran peuvent proposer un saut direct vers la navigation ; les moteurs utilisent cette structure pour comprendre l’architecture du site. Les liens à l’intérieur de <nav> sont considérés comme des liens de navigation (parfois moins « prioritaires » que les liens dans le contenu pour le maillage interne). Un skip link « Aller au contenu » permet de sauter la nav principale pour les utilisateurs au clavier.
Comment ça marche ?
Les blocs <nav> regroupent les liens de navigation (menu principal, fil d'Ariane, pagination). Plusieurs <nav> par page sont autorisées ; chaque bloc doit être identifié avec aria-label (ex. « Navigation principale », « Fil d'Ariane ») pour les lecteurs d'écran.
Impact business
La balise nav améliore l’accessibilité (navigation au clavier, annonces pour les lecteurs d’écran) et envoie un signal clair sur les zones de liens. Rester à des <div> ou <ul> sans sémantique fait perdre en clarté et en conformité aux bonnes pratiques. Une structure nav claire facilite l’audit accessibilité et le référencement (compréhension des zones de la page). Les bonnes pratiques WCAG recommandent d’identifier chaque bloc nav pour les utilisateurs de technologies d’assistance. Sur les parcours au clavier, un menu principal mal balisé ajoute souvent 5 à 15 tabulations « inutiles » avant le contenu ; un <nav> explicite plus skip link réduit ce bruit pour une large part des pages modèle dès la mise à jour du gabarit.
Bonnes pratiques
- Une <nav> par bloc de navigation (menu, breadcrumb, pagination). Toujours ajouter un aria-label distinct sur chaque nav. Proposer un skip link « Aller au contenu » pour sauter la nav principale.
Erreurs communes
- Mettre tous les liens du site dans une seule nav, ou utiliser des div à la place. Oublier les aria-label sur les nav multiples, ce qui rend la navigation confuse pour les utilisateurs de technologies d'assistance.
Prompt IA
Contexte : page avec [menu principal, footer avec liens, fil d’Ariane, menu secondaire]. Génère la structure HTML avec <nav> et aria-label pour chaque bloc. Ajoute un skip link « Aller au contenu » pointant vers [id du main]. Indique l’ordre de tabulation recommandé et comment annoncer chaque nav aux lecteurs d’écran.
SERVICE LIÉ
Passer de la définition à un projet concret.
Création de site internet
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur Balise nav.
Non. <nav> est réservé aux blocs de liens de navigation (menu principal, fil d’Ariane, pagination). Les liens dans le contenu (texte, footer informatif) ou les liens contextuels ne doivent pas être forcément dans une nav. Plusieurs <nav> sont possibles ; identifiez-les avec aria-label (ex. « Navigation principale », « Fil d’Ariane »).
Indirect. Google utilise la structure pour comprendre la page ; distinguer la navigation du contenu principal peut aider. Les liens dans nav sont suivis comme les autres. Ce n’est pas un facteur de classement direct, mais une structure sémantique claire fait partie des bonnes pratiques et peut soutenir l’accessibilité et l’UX, elles-mêmes des signaux qualité.
Utilisez aria-label sur chaque <nav> pour les distinguer : <nav aria-label="Navigation principale">, <nav aria-label="Fil d’Ariane">. Les lecteurs d’écran annoncent alors le rôle (navigation) et le nom (label), ce qui permet à l’utilisateur de choisir quelle navigation utiliser sans tout écouter.