Docs HTML exécutables : Balise nav

Q: Les liens dans nav doivent-ils être dans une liste ?

C'est le schéma courant, et il est bon : un d'éléments permet aux lecteurs d'écran d'annoncer combien de liens compte le menu. Des liens placés directement dans sont aussi valides, par exemple pour deux ou trois liens en ligne.

Q: Chaque groupe de liens a-t-il besoin d'un élément nav ?

Non. Utilisez uniquement pour les blocs de navigation principaux. Quelques liens dans un paragraphe ou une courte liste de liens légaux dans le pied de page n'en ont pas besoin, et trop de repères nav rendent chacun plus difficile à trouver.

Q: Comment faire une barre de navigation horizontale ?

Placez les liens dans un à l'intérieur de , puis donnez à la liste display: flex; list-style: none; padding: 0; et un gap. Flexbox dispose les éléments en ligne.

Q: Comment signaler la page actuelle dans une barre de navigation ?

Ajoutez aria-current="page" au lien de la page où se trouve l'utilisateur, et stylisez-le avec le sélecteur [aria-current="page"]. Les lecteurs d'écran l'annoncent alors aussi comme la page actuelle.

Entourez votre menu de <nav> et placez les liens dans une liste. Flexbox transforme la liste en barre horizontale :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none et padding: 0 retirent les puces et le retrait. display: block sur chaque lien permet à son padding d'occuper une vraie place dans la barre, donc toute la boîte avec son padding devient la zone de clic. Supprimez la ligne display: flex et le même menu devient une liste verticale, c'est-à-dire un menu de barre latérale.

<nav> en lui-même ne ressemble à rien. Son rôle est le sens : les lecteurs d'écran l'exposent comme un repère de navigation, pour qu'un utilisateur puisse aller au menu, ou le sauter, d'une seule touche.

Signaler la page actuelle

Ajoutez aria-current="page" au lien de la page affichée. Il dit « vous êtes ici » aux lecteurs d'écran, et il donne au CSS une prise pour mettre le lien en évidence :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Déplacez aria-current="page" sur un autre lien et la mise en évidence le suit. Styliser l'attribut plutôt qu'une classe .active garde l'apparence et l'accessibilité synchronisées : impossible d'avoir l'une sans l'autre.

Plusieurs nav sur une page : labels et fil d'Ariane

Une page peut avoir un menu principal, un fil d'Ariane et une table des matières, chacun dans son propre <nav>. Donnez à chacun un aria-label, pour qu'un lecteur d'écran annonce « navigation Breadcrumb » au lieu de trois entrées « navigation » identiques :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

Le fil d'Ariane utilise une liste ordonnée <ol> car l'ordre compte. Les barres obliques viennent du ::before en CSS, donc les lecteurs d'écran ne lisent pas « barre oblique » entre chaque élément. Le dernier élément est la page actuelle et n'est pas un lien.

Une table des matières

Une liste de liens vers des sections de la même page est aussi de la navigation. Les liens #id mènent à l'élément qui a cet id ; essayez-les dans l'aperçu :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

Ici, le nom vient d'un titre visible via aria-labelledby, ce qui vaut mieux que aria-label quand le titre est déjà à l'écran.

Sur les écrans étroits, les menus se cachent généralement derrière un bouton. Utilisez un vrai <button> avec aria-expanded, et gardez les liens dans <nav> :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded indique à un lecteur d'écran si le menu est ouvert, et l'attribut hidden retire la liste à la fois de l'écran et de l'arbre d'accessibilité tant qu'elle est fermée. Sur les grands écrans, vous afficheriez la liste avec une media query et masqueriez le bouton.

Erreurs fréquentes

Entourer chaque groupe de liens de <nav>. Utilisez-le pour le menu principal, le fil d'Ariane, la pagination et les tables des matières. Les liens dans le texte ne sont pas des blocs de navigation.
Un bouton de menu fait avec une <div>. Il ne peut pas recevoir le focus ni être activé au clavier. Utilisez <button>.
Plusieurs nav sans label. Ajoutez aria-label ou aria-labelledby à chacun pour pouvoir les distinguer.
Seulement colorer le lien actuel. Ajoutez aria-current="page" ; la couleur seule n'est pas annoncée et n'est pas forcément visible pour tout le monde.
Des liens avec href="#" en production. Ils conviennent pour une démo, mais les vrais éléments de menu ont besoin de vraies URL pour marcher quand on les ouvre dans un nouvel onglet. La page lien HTML explique le fonctionnement des valeurs de href.

Questions fréquentes

Qu'est-ce que la balise nav en HTML ?

<nav> est un élément sémantique qui entoure un bloc de liens de navigation principaux, comme le menu du site, une table des matières ou un fil d'Ariane. Les lecteurs d'écran le listent comme un repère de navigation pour que les utilisateurs puissent y accéder directement.

Les liens dans nav doivent-ils être dans une liste ?

C'est le schéma courant, et il est bon : un <ul> d'éléments <li> permet aux lecteurs d'écran d'annoncer combien de liens compte le menu. Des liens placés directement dans <nav> sont aussi valides, par exemple pour deux ou trois liens en ligne.

Chaque groupe de liens a-t-il besoin d'un élément nav ?

Non. Utilisez <nav> uniquement pour les blocs de navigation principaux. Quelques liens dans un paragraphe ou une courte liste de liens légaux dans le pied de page n'en ont pas besoin, et trop de repères nav rendent chacun plus difficile à trouver.

Comment faire une barre de navigation horizontale ?

Placez les liens dans un <ul> à l'intérieur de <nav>, puis donnez à la liste display: flex; list-style: none; padding: 0; et un gap. Flexbox dispose les éléments en ligne.

Comment signaler la page actuelle dans une barre de navigation ?

Ajoutez aria-current="page" au lien de la page où se trouve l'utilisateur, et stylisez-le avec le sélecteur [aria-current="page"]. Les lecteurs d'écran l'annoncent alors aussi comme la page actuelle.

Une page peut-elle avoir plusieurs nav ?

Oui, par exemple un menu principal, un fil d'Ariane et une table des matières. Donnez à chacun un aria-label différent comme « Main » ou « Breadcrumb » pour que les utilisateurs de lecteurs d'écran puissent les distinguer.

Concepts liés