W3docs
fr
Se connecter

Balise HTML <nav>

La balise HTML <nav> définit un bloc de liens de navigation, dans le document courant ou vers d'autres documents. Apprenez à utiliser <nav>.

La balise <nav> est l'un des éléments HTML5. Elle définit une section de liens de navigation, soit dans le document courant, soit vers d'autres documents. Les blocs de navigation typiques sont le menu principal d'un site, une table des matières, un fil d'Ariane ou un index. Les baliser avec <nav> améliore à la fois la structure du document et sa sémantique, aidant les navigateurs, les lecteurs d'écran et les moteurs de recherche à comprendre la page.

exemple de balise nav

Un document HTML peut contenir plusieurs éléments <nav> — par exemple, un pour la navigation à l'échelle du site et un pour la navigation intra-page (dans la page).

Quand utiliser <nav> (et quand ne pas l'utiliser)

<nav> est destiné aux blocs principaux de liens de navigation, pas à tous les groupes de liens de la page. Réservez-le aux zones de navigation primaires et reconnaissables qu'un utilisateur rechercherait.

Vous n'avez pas besoin d'encapsuler chaque liste de liens dans un <nav> :

  • Les liens utilitaires du pied de page (politique de confidentialité, conditions d'utilisation, droits d'auteur) relèvent généralement du jugement. Un petit ensemble de liens légaux/utilitaires peut simplement figurer dans l'élément <footer> sans <nav> supplémentaire. Réservez <nav> dans le pied de page pour un véritable menu secondaire.
  • La pagination (précédent/suivant, numéros de page) est également une question de jugement — il s'agit bien de navigation, donc un <nav> est acceptable, mais un simple lien « article suivant » n'en a pas besoin.
  • Les liens dans le contenu à l'intérieur d'un paragraphe ou du corps d'un article n'ont pas leur place dans un <nav>.

Une bonne règle empirique : si la suppression du bloc rendrait plus difficile la navigation dans le site ou le document, il s'agit probablement d'un <nav>. L'élément <nav> est souvent placé aux côtés des éléments <header>, <main> et <aside> qui structurent une page HTML5.

Danger

La balise <nav> ne peut pas être imbriquée dans l'élément <address>.

Accessibilité : le point de repère de navigation

Un élément <nav> expose automatiquement un point de repère navigation aux technologies d'assistance, ce qui permet aux utilisateurs de lecteurs d'écran d'y accéder directement. Pour cette raison, vous ne devez pas ajouter role="navigation" vous-même — l'élément l'implique déjà.

Lorsqu'une page contient plus d'un <nav>, donnez à chacun un nom accessible unique afin que les utilisateurs puissent les distinguer. Utilisez aria-label (pour une étiquette littérale courte) ou aria-labelledby (pour pointer vers un titre visible) :

<!-- Primary site navigation -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Breadcrumb navigation on the same page -->
<nav aria-label="Breadcrumb">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <span aria-current="page">Laptops</span>
</nav>

N'incluez pas le mot « navigation » dans l'étiquette (par exemple aria-label="Main navigation") — les technologies d'assistance l'annoncent déjà comme un point de repère de navigation, ce qui le ferait lire deux fois. Utilisez aria-current="page" pour marquer le lien correspondant à la page actuelle.

Syntaxe

La balise <nav> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<nav>) et fermante (</nav>).

Exemple d'utilisation de la balise HTML <nav> :

Exemple de la balise nav HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | 
      <a href="/learn-css.html">CSS</a> | 
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php.html">PHP</a>
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>
Essayez vous-même »

Exemple de la balise <nav> :

Exemple de la balise nav HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/quiz">Quizzes</a>
      <a href="/snippets">Snippets</a>
      <a href="/tools">Tools</a>
      <a href="/string-functions">String Functions</a>
    </nav>
  </body>
</html>
Essayez vous-même »

Exemple de création d'un menu déroulant avec la balise HTML <nav> :

L'exemple ci-dessous crée un menu déroulant en CSS pur en affichant un <ul> imbriqué au :hover.

Avertissement

Ce menu déroulant en CSS pur est présenté pour illustrer la structure de <nav>, pas comme du code prêt pour la production. Les sous-menus ne s'ouvrant qu'au survol de la souris (:hover), ils sont inaccessibles au clavier et à la plupart des utilisateurs de lecteurs d'écran, ce qui ne respecte pas les critères WCAG. Un vrai menu déroulant doit également répondre au focus clavier (:focus-within) et exposer son état avec des attributs tels que aria-expanded et aria-haspopup — généralement avec un peu de JavaScript.

Exemple de la balise nav pour la création d'un menu déroulant

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav ul ul {
        display: none;
      }
      nav ul li:hover > ul {
        display: block;
      }
      nav ul:after {
        content: "";
        clear: both;
        display: block;
      }
      nav ul li {
        float: left;
        position: relative;
        list-style-type: none;
      }
      nav ul li:hover {
        background: rgba(19, 20, 123, 0.67);
      }
      nav ul li:hover a {
        color: #fff;
      }
      nav ul li a {
        display: block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
        background-color: rgba(35, 17, 134, 0.8);
        font-family: sans-serif;
      }
      nav ul ul {
        background: #5f6975;
        padding: 0;
        position: absolute;
        top: 100%;
      }
      nav ul ul li {
        float: none;
        position: relative;
      }
      nav ul ul li a {
        padding: 15px 10px;
        color: #ffffff;
        text-transform: uppercase;
      }
      nav ul ul li a:hover {
        background: rgba(19, 20, 123, 0.67);
      }
    </style>
  </head>
  <body>
    <h1>Dropdown menu with the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/quiz">Quizzes</a>
          <ul>
            <li>
              <a href="/quiz/html-basic">HTML Basics</a>
            </li>
            <li>
              <a href="/quiz/css-basic">CSS Basics</a>
            </li>
            <li>
              <a href="/quiz/javascript-basic">JavaScript Basics</a>
            </li>
            <li>
              <a href="/quiz/php-basic">PHP Basics</a>
            </li>
            <li>
              <a href="/quiz/es6-basic">ES6 Basics</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/snippets">Snippets</a>
          <ul>
            <li>
              <a href="/snippets/angularjs">Angular JS</a>
            </li>
            <li>
              <a href="/snippets/apache">Apache</a>
            </li>
            <li>
              <a href="/snippets/git">Git</a>
            </li>
            <li>
              <a href="/snippets/linux">Linux</a>
            </li>
            <li>
              <a href="/snippets/nodejs">Node.Js</a>
            </li>
            <li>
              <a href="/snippets/symfony">Symfony</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/tools">Tools</a>
          <ul>
            <li>
              <a href="/tools/html-encoder">HTML ENCODER/DECODER</a>
            </li>
            <li>
              <a href="/tools/css-maker">CSS MAKER</a>
            </li>
            <li>
              <a href="/tools/password-generator">PASSWORD GENERATOR</a>
            </li>
            <li>
              <a href="/tools/image-base64">Base 64</a>
            </li>
            <li>
              <a href="/tools/code-diff">CODE DIFF</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/string-functions">String Functions</a>
          <ul>
            <li>
              <a href="/tools/string-reverse">STRING REVERSE</a>
            </li>
            <li>
              <a href="/tools/string-word-count">STRING WORD COUNT</a>
            </li>
            <li>
              <a href="/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>
Essayez vous-même »

Attributs

La balise <nav> prend en charge les attributs globaux et les attributs d'événements.. Notez que les attributs globaux s'appliquent à tous les éléments HTML.

Comment styliser une balise HTML <nav>

<nav> est un conteneur sémantique sans apparence par défaut, donc le stylisme se fait avec CSS. Un schéma courant consiste à donner à la barre un arrière-plan et à disposer les liens horizontalement, en supprimant le soulignement par défaut et en les espaçant :

nav {
  background-color: #333;
  padding: 10px;
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}

Pour disposer les liens en ligne, Flexbox (display: flex sur le <nav>) est l'approche moderne, comme illustré dans le deuxième exemple ci-dessus.

Exercice

Pratique
Quel est le rôle et l'utilisation de la balise nav en HTML ?
Quel est le rôle et l'utilisation de la balise nav en HTML ?
Was this page helpful?