HTML — La balise <nav>

La balise <nav> est l'une des balises sémantiques introduites avec HTML5 pour donner du sens à la structure d'une page web. Avant HTML5, un menu de navigation s'écrivait dans un <div> lambda — difficile à distinguer du reste pour un moteur de recherche ou un outil d'accessibilité. Avec <nav>, le rôle du bloc est explicite dès la balise d'ouverture. Cette page détaille son fonctionnement, ses cas d'usage et les règles à respecter pour bien l'utiliser en 2026.

À quoi sert la balise <nav> ?

La balise <nav> délimite une zone de navigation dans une page web. Elle indique au navigateur, aux moteurs de recherche et aux lecteurs d'écran que ce bloc contient des liens permettant de se déplacer dans le site ou dans la page.

Ce qui change concrètement par rapport à un <div> : la balise porte une valeur sémantique. Google comprend que ce bloc est de la navigation, pas du contenu éditorial. Un lecteur d'écran sait qu'il peut proposer à l'utilisateur de sauter ce bloc ou d'y aller directement.

<nav> n'est pas faite pour envelopper tous les liens d'une page. Elle est réservée aux blocs de navigation principaux : menu du site, fil d'Ariane, navigation entre chapitres. Les liens dans un paragraphe ou un pied de page n'en ont pas besoin.

Rôle pour l'accessibilité

Prenons un cas concret : un utilisateur malvoyant navigue au clavier avec un lecteur d'écran. Sans <nav>, il entend l'intégralité du code source avant d'atteindre le contenu — logo, liens du menu, sous-menus, tout. Avec <nav>, le lecteur d'écran détecte le repère et lui propose directement de sauter au menu ou de l'ignorer. Un gain de temps, et surtout une expérience de navigation viable.

C'est l'avantage central des balises sémantiques HTML5 sur les <div> génériques : elles transmettent une intention, pas seulement une mise en forme.

Syntaxe de base — nav avec une liste

La structure la plus courante associe <nav> à une liste <ul>. C'est la combinaison recommandée pour un menu principal : chaque lien est un élément de liste, ce qui reflète correctement la structure et facilite le style CSS.

<nav>
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/apropos">À propos</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Pourquoi utiliser <ul> à l'intérieur ? Parce qu'un menu est une liste de liens — la balise <ul> le dit clairement, et les lecteurs d'écran annoncent le nombre d'éléments à l'utilisateur avant qu'il commence à les parcourir.

Menu horizontal sans liste

Pour un petit nombre de liens (quatre ou cinq), une version sans liste est acceptable. Les liens sont séparés par un caractère visuel, ce qui donne un menu compact avec peu de balisage :

<nav>
  <a href="/">Accueil</a> |
  <a href="/apropos">À propos</a> |
  <a href="/services">Services</a> |
  <a href="/contact">Contact</a>
</nav>

Ce qui donne :

Ce format convient pour des menus de pied de page ou des barres de navigation secondaires légères. Pour un menu principal avec plusieurs niveaux, préférez la version avec <ul>.

Navigation technique dans un site de documentation

Un autre usage fréquent : relier les grandes sections d'un site de documentation ou d'un tutoriel. Ici, <nav> signale à Google que ces liens organisent le contenu du site — pas qu'ils font partie d'un article.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Ce type de <nav> apparaît souvent en haut de page ou dans une barre latérale. Il aide aussi les robots d'indexation à comprendre la hiérarchie du site.

Compatibilité navigateurs

La balise <nav> fonctionne dans tous les navigateurs modernes sans aucun réglage particulier : Chrome, Firefox, Safari, Edge et Opera la supportent nativement depuis longtemps.

Internet Explorer 9 et supérieur la reconnaissait aussi. IE8 ne la supporte pas — mais cibler IE8 en 2026 est un cas pratiquement inexistant. Si vous vous trouvez dans cette situation, le polyfill html5shiv règle le problème en ajoutant la reconnaissance des balises HTML5 aux vieilles versions d'IE.

Une balise arrivée avec HTML5

La balise <nav> n'existe pas en HTML 4.01. Elle fait partie des éléments sémantiques de structure introduits avec HTML5, dans le même lot que <header>, <footer>, <article> et <section>. Leur point commun : remplacer les <div> sans signification par des balises qui décrivent le rôle de leur contenu.

Attributs globaux

La balise <nav> prend en charge les attributs globaux en HTML.

Attributs d'événement

Elle prend également en charge les attributs d'événement en HTML.

Par carabde | Mis à jour le 28 avril 2026