HTML — La balise <nav>

La balise <nav> est un élément sémantique HTML5 qui délimite une zone de navigation principale dans une page web. Elle signale au navigateur — et aux outils d'accessibilité — que ce bloc contient des liens de déplacement dans le site ou dans la page.

Avant HTML5, les menus de navigation étaient codés avec des <div> sans signification particulière. La balise <nav> change ça : elle donne du sens à la structure, ce qui aide les moteurs de recherche et les lecteurs d'écran à mieux interpréter la page.

<nav> n'est pas faite pour envelopper tous les liens d'une page. Elle est réservée aux blocs de navigation significatifs — menu principal, fil d'Ariane, navigation secondaire. Les liens isolés dans un paragraphe ou un pied de page n'en ont généralement pas besoin.

Rôle concret pour l'accessibilité

Imaginez un utilisateur malvoyant qui navigue au clavier et au lecteur d'écran. Sans <nav>, il entend l'intégralité du code avant d'atteindre le contenu. Avec <nav>, le lecteur d'écran lui propose d'emblée de sauter au menu ou de l'ignorer. C'est exactement ce que fait la balise : créer un repère clair pour qui en a besoin.

C'est la raison principale d'utiliser les balises sémantiques HTML5 plutôt que des <div> génériques.

Syntaxe de base

La structure la plus courante associe <nav> à une liste <ul>. C'est sémantiquement correct et facile à styliser en 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>

Exemple pratique : menu horizontal en ligne

Pour un petit nombre de liens, une version sans liste fonctionne bien. Les liens sont séparés par un séparateur visuel, ce qui donne un menu compact et lisible :

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

Ce qui donne :

Exemple 2 : navigation vers des ressources techniques

Dans un site de documentation, <nav> relie les grandes rubriques du guide. L'avantage : Google sait d'un coup d'œil que ce bloc est de la navigation, pas du contenu éditorial.

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

Compatibilité navigateurs

La balise <nav> fonctionne dans tous les navigateurs modernes : Edge, Firefox, Opera, Chrome et Safari. Internet Explorer 9 et supérieur la reconnaissent aussi.

Remarque : Internet Explorer 8 et les versions antérieures ne la supportent pas. Si vous devez encore cibler IE8 en 2026 (cas très rare), le polyfill html5shiv résout le problème.

Nouveauté HTML5

La balise <nav> n'existe pas en HTML 4.01. Elle est arrivée avec HTML5 dans le cadre des éléments sémantiques de structure, aux côtés de <header>, <footer>, <article> et <section>.

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.