W3docs
fr
Se connecter

Listes HTML

En HTML, il existe trois types de listes : non ordonnées, ordonnées et de description, chacune définie avec des balises différentes

En HTML, il existe trois types de listes : non ordonnées, ordonnées et de description. Chacune est définie à l'aide de balises différentes. Voyons cela de plus près.

Listes HTML non ordonnées

Les listes non ordonnées permettent de regrouper des éléments sans ordre numérique. Lorsque l'ordre des éléments change, la signification ne change pas. Pour créer une liste non ordonnée, on utilise la balise <ul>. Cette balise fonctionne par paires ; le contenu est écrit entre les balises ouvrantes <ul> et fermantes </ul>.

Chaque élément d'une liste non ordonnée est déclaré à l'intérieur de la balise <li>.

Exemple de la balise HTML <ul> pour créer une liste non ordonnée :

Un exemple de liste non ordonnée|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>An unordered list:</h1>
    <ul>
      <li>This is a list item</li>
      <li>This is another list item</li>
      <li>This is one more list item</li>
    </ul>
  </body>
</html>
Essayez vous-même »

Par défaut, les éléments des listes non ordonnées sont marqués par des puces (petits cercles noirs). L'ancien attribut type (type="circle", type="square") permettait de modifier le style des puces, mais il est déprécié en HTML5. Utilisez plutôt la propriété CSS list-style-type — c'est la méthode moderne et supportée pour contrôler les marqueurs des listes ordonnées et non ordonnées. La table de migration complète des anciennes valeurs type vers CSS se trouve dans la section sur les listes ordonnées ci-dessous.

Exemple de la balise HTML <ul> pour créer une liste non ordonnée dont les éléments sont marqués par des puces :

Exemple d'attribut type pour les listes HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ul type="circle">
      <li>List item </li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <ul type="square">
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </body>
</html>
Essayez vous-même »

Résultat

unordered-list-style

Vous pouvez également utiliser la propriété CSS list-style-type ou list-style-image pour spécifier le type d'un élément de liste.

Exemple de la balise HTML <ul> utilisée avec la propriété CSS list-style-type pour créer une liste non ordonnée :

Exemple de propriété list-style-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Examples of unordered lists:</h2>
    <ul style="list-style-type: square;">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
    <ul style="list-style-type: disc;">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
    <ul style="list-style-type: circle;">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
  </body>
</html>
Essayez vous-même »

Listes HTML ordonnées

La liste ordonnée HTML permet de lister des éléments numérotés. Elle commence par la balise <ol>. Cette balise fonctionne par paires ; le contenu est écrit entre les balises ouvrantes <ol> et fermantes </ol>.

Chaque élément de la liste ordonnée commence par la balise ouvrante <li> et se termine par la balise fermante </li>.

Exemple de la balise HTML <ol> pour créer une liste ordonnée :

Exemple d'une liste HTML ordonnée|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>An ordered list:</h1>
    <ol>
      <li>This is List item number 1</li>
      <li>This is List item number 2</li>
      <li>This is List item number 3</li>
    </ol>
  </body>
</html>
Essayez vous-même »

Par défaut, les éléments d'une liste ordonnée sont numérotés. Pour les numéroter avec des lettres ou des chiffres romains, l'ancienne méthode consistait à ajouter type="a" ou type="I" à la balise <ol>. Cet attribut type fonctionne encore dans les navigateurs mais est déprécié en HTML5 ; il est donc préférable d'utiliser la propriété CSS list-style-type dans le nouveau code.

Migration de l'attribut type déprécié vers CSS

Chaque ancienne valeur de type correspond directement à une valeur CSS list-style-type :

Attribut dépréciéCSS équivalentExemple de rendu
type="1"list-style-type: decimal;1, 2, 3
type="A"list-style-type: upper-alpha;A, B, C
type="a"list-style-type: lower-alpha;a, b, c
type="I"list-style-type: upper-roman;I, II, III
type="i"list-style-type: lower-roman;i, ii, iii

Le premier exemple ci-dessous utilise l'attribut type déprécié afin que vous puissiez voir tous les styles de marqueurs d'un coup d'œil ; dans le code de production, utilisez plutôt la valeur list-style-type équivalente du tableau.

Exemple de la balise HTML <ol> pour créer une liste ordonnée avec des lettres et des chiffres romains :

Exemple de différents marqueurs d'éléments de liste

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3>A numbered list:</h3>
    <ol>
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>An alphabetized list:</h3>
    <ol type="A">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>An alphabetized list (lowercase letters):</h3>
    <ol type="a">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>A numbered list (Roman numerals):</h3>
    <ol type="I">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>A numbered list (lowercase Roman numerals):</h3>
    <ol type="i">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
  </body>
</html>
Essayez vous-même »

Listes de description HTML

Les listes de description HTML permettent d'associer des termes à leurs définitions, à la manière d'un dictionnaire ou d'un glossaire.

Pour créer une liste de description, on utilise la balise <dl>. Cette balise fonctionne par paires.

Dans <dl>, on utilise les balises <dt> pour un terme/nom dans une liste de description et <dd> pour la description d'un terme/nom dans une liste de description.

Exemple de la balise HTML <dl> pour créer une liste de description :

Exemple d'une liste de description|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Description Lists:</h1>
    <dl>
      <dt>Tea</dt>
      <dd>hot drink</dd>
      <dt>Juice</dt>
      <dd>cold drink</dd>
    </dl>
  </body>
</html>
Essayez vous-même »

Résultat

description-list

Quand utiliser <dl> plutôt qu'une <ul> de paires

Utilisez une liste de description lorsque vos données constituent réellement un ensemble de paires nom/valeur (terme/définition) : entrées de glossaire, métadonnées clé-valeur (auteur, date de publication, catégorie), paires question/réponse de FAQ ou dialogues. L'élément <dl> rend cette relation explicite dans le balisage, ce que les technologies d'assistance peuvent transmettre.

Si vos éléments forment simplement une séquence plate sans structure par paires, un simple <ul> est le bon choix. N'imitez pas une structure clé/valeur en alternant des éléments <li> dans un <ul> — cela supprime l'association sémantique entre le terme et sa description.

Un seul <dt> peut être suivi de plusieurs éléments <dd> (un terme, plusieurs descriptions), et plusieurs éléments <dt> peuvent partager un seul <dd> (plusieurs termes avec la même définition). Les deux cas sont valides :

<dl>
  <dt>Coffee</dt>
  <dt>Espresso</dt>
  <dd>A hot caffeinated drink.</dd>

  <dt>Water</dt>
  <dd>A drink with no calories.</dd>
  <dd>Also used for cooking and cleaning.</dd>
</dl>

Mauvais usage courant : le <dl> a parfois été utilisé uniquement pour son indentation par défaut. Ne l'utilisez jamais à des fins visuelles uniquement — utilisez margin/padding en CSS à cet effet. N'utilisez <dl> que lorsque le contenu est réellement des données terme/description. Consultez les pages dédiées à <dl>, <dt> et <dd> pour plus de détails.

Listes HTML imbriquées

Une liste imbriquée contient une liste à l'intérieur d'une autre liste.

Exemple d'une liste HTML imbriquée :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>A nested HTML list</h2>
    <p>A nested list contains a list inside a list.</p>
    <ul>
      <li>Copybooks</li>
      <li>
        Books
        <ul>
          <li>Detective books</li>
          <li>Roman books</li>
          <li>Fairy tale books</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
Essayez vous-même »

La liste imbriquée doit être placée à l'intérieur d'un élément <li>, et non directement entre les éléments <li> du parent — un <ul>/<ol> n'est pas un enfant direct valide d'un autre <ul>/<ol>.

Vous pouvez mélanger les types de listes : une liste ordonnée peut être imbriquée dans une liste non ordonnée, et vice versa. Les navigateurs indentent automatiquement chaque niveau imbriqué (via le padding gauche par défaut sur <ul>/<ol>) afin que la hiérarchie soit claire.

Exemple d'une liste imbriquée mixte (liste ordonnée dans une liste non ordonnée) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Shopping list</h2>
    <ul>
      <li>Fruit</li>
      <li>
        Drinks, in order of preference:
        <ol>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Water</li>
        </ol>
      </li>
      <li>Bread</li>
    </ul>
  </body>
</html>

Contrôle de la numérotation des listes

Par défaut, une liste ordonnée numérote ses éléments à partir de 1. Trois attributs permettent de modifier ce comportement :

  • start (sur <ol>) — le numéro à partir duquel la liste commence.
  • reversed (sur <ol>) — compte à rebours au lieu de compter vers le haut.
  • value (sur un <li> spécifique) — définit manuellement le numéro de cet élément ; les éléments suivants continuent à partir de ce numéro.

Utiliser start pour continuer une liste à travers des sections

L'attribut start est particulièrement utile lorsqu'une liste logique unique est interrompue par des titres, des images ou des paragraphes. Par exemple, si la première section se termine à l'étape 39, vous continuez les étapes dans la deuxième section avec <ol start="40"> pour que la numérotation reste correcte après l'interruption.

Exemple d'une liste HTML commençant à un numéro spécifié :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>List counting control</h2>
    <p>Continuing a procedure whose first section ended at step 39.</p>
    <ol start="40">
      <li>Pen</li>
      <li>Pencil</li>
      <li>Copybook</li>
    </ol>
    <ol type="I" start="40">
      <li>Pen</li>
      <li>Pencil</li>
      <li>Copybook</li>
    </ol>
  </body>
</html>
Essayez vous-même »

Exemple de reversed et value :

L'attribut reversed numérote la liste de haut en bas — pratique pour les comptes à rebours ou les classements « top N » affichés du pire au meilleur. L'attribut value sur un <li> unique fait sauter le compteur à un numéro spécifique, et les éléments suivants continuent à partir de là.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>A reversed list (countdown)</h2>
    <ol reversed>
      <li>Bronze medal</li>
      <li>Silver medal</li>
      <li>Gold medal</li>
    </ol>

    <h2>Setting an item's number with value</h2>
    <ol>
      <li>First</li>
      <li value="5">Jumps to 5</li>
      <li>Continues at 6</li>
    </ol>
  </body>
</html>

La liste inversée ci-dessus s'affiche ainsi : 3. Bronze medal, 2. Silver medal, 1. Gold medal. Dans la deuxième liste, le deuxième élément est forcé à 5, donc le troisième élément affiche 6.

Accessibilité des listes HTML

Les listes ont une signification pour les technologies d'assistance, pas seulement pour la mise en forme visuelle. Lorsqu'un lecteur d'écran rencontre un <ul>, <ol> ou <dl>, il annonce le rôle de la liste et généralement le nombre d'éléments (par exemple, « liste, 3 éléments »), puis annonce la position de chaque élément. Ce contexte aide les utilisateurs qui ne peuvent pas voir les puces ou les numéros à comprendre la structure ; le choix du bon type de liste est donc aussi une décision d'accessibilité.

Quelques conseils pratiques :

  • Supprimer les marqueurs peut supprimer la sémantique de la liste. Dans Safari avec VoiceOver, appliquer list-style: none (courant pour les menus de navigation et les listes avec mise en forme personnalisée) peut amener le navigateur à abandonner le rôle implicite de liste, de sorte que la liste n'est plus annoncée comme telle. Pour conserver la sémantique, ajoutez un role="list" explicite :
<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
  • Enveloppez les listes de navigation dans <nav>. Un menu de site est conventionnellement une liste de liens à l'intérieur d'un point de repère <nav>. Le <nav> expose un point de repère de navigation vers lequel les utilisateurs de lecteurs d'écran peuvent naviguer directement, tandis que le <ul> interne regroupe et comptabilise les éléments.
<nav aria-label="Main">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
  • Utilisez <ol> lorsque l'ordre est significatif (étapes, classements, instructions) et <ul> lorsqu'il ne l'est pas — les lecteurs d'écran annoncent les positions dans les listes ordonnées, la distinction est donc transmise aux utilisateurs, pas seulement affichée visuellement.

Liste horizontale avec CSS

Les listes HTML peuvent être mises en forme de nombreuses façons différentes avec CSS.

Vous pouvez styliser des listes HTML à l'aide de différentes propriétés CSS. Par exemple, vous pouvez créer un menu de navigation en définissant list-style-type: none pour supprimer les puces et display: flex pour disposer les éléments en ligne.

Les couleurs ci-dessous sont écrites sous forme de valeurs hexadécimales littérales pour que l'exemple soit autonome ; dans un vrai projet, vous référenceriez généralement les variables de couleur de votre design system (propriétés personnalisées CSS) plutôt que de coder en dur des valeurs hexadécimales.

Exemple d'une liste horizontale avec CSS :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        background-color: #F44336;
      }
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }
      li a:hover {
        background-color: #981816;
      }
    </style>
  </head>
  <body>
    <h2>Navigation Menu Example</h2>
    <p>
      You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
    </p>
    <ul>
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/tool/">Tools</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/snippets">Snippets</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/quiz/">Quizzes</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/string-functions/">String Functions</a>
      </li>
    </ul>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique
Quels sont les différents types de listes HTML mentionnés dans l'article ? (Sélectionnez toutes les réponses correctes.)
Quels sont les différents types de listes HTML mentionnés dans l'article ? (Sélectionnez toutes les réponses correctes.)
Pratique
Vous balisez les étapes d'une recette dont l'ordre est important. Quel type de liste devez-vous utiliser ?
Vous balisez les étapes d'une recette dont l'ordre est important. Quel type de liste devez-vous utiliser ?
Pratique
Vous appliquez list-style: none à un menu de navigation. Que devez-vous ajouter pour que VoiceOver l'annonce toujours comme une liste ?
Vous appliquez list-style: none à un menu de navigation. Que devez-vous ajouter pour que VoiceOver l'annonce toujours comme une liste ?
Was this page helpful?