Docs HTML exécutables : Listes HTML

Q: Comment faire une liste à puces en HTML ?

Utilisez une liste non ordonnée : avec un par puce, par exemple Milk Eggs . Le navigateur dessine une puce devant chaque élément et met la liste en retrait.

Q: Comment enlever les puces d'une liste en HTML ?

Définissez list-style: none sur le en CSS. Définissez aussi padding-inline-start: 0 (ou padding: 0) pour supprimer le retrait que le navigateur ajoute pour les puces.

Q: Comment commencer une liste numérotée à un autre nombre ?

Utilisez l'attribut start : numérote le premier élément 5. reversed compte à rebours, et value sur un fixe le numéro de cet élément et des suivants.

Q: Comment faire une liste imbriquée en HTML ?

Placez le ou intérieur dans un de la liste extérieure, après le texte de cet élément. Une liste placée directement dans un autre , entre des éléments , est invalide.

Les listes HTML : ul, ol et li

HTML a deux listes principales. <ul> (unordered list, liste non ordonnée) affiche des puces, et <ol> (ordered list, liste ordonnée) affiche des numéros. Chaque élément est un <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Utilisez <ol> quand l'ordre a un sens (étapes, classements, table des matières) et <ul> quand il n'en a pas. Les lecteurs d'écran annoncent les deux comme des listes avec un nombre d'éléments, par exemple « liste, 3 éléments », ce qui explique pourquoi une vraie liste vaut mieux que des lignes qui commencent par un « • » ou un « 1. » tapé à la main.

Une liste ne peut contenir directement que des éléments <li>. Tout le reste, y compris les titres, les paragraphes et les autres listes, va à l'intérieur d'un <li>.

Styles de puces

list-style-type sur le <ul> change la puce. Le pseudo-élément ::marker stylise la puce ou le numéro lui-même, séparément du texte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Une valeur de type chaîne utilise ce texte comme puce. "\2713 " est une coche suivie d'une espace : la première espace ne fait que terminer l'échappement \2713. ::marker n'accepte que quelques propriétés, surtout color, font-size et d'autres propriétés de police, ce qui couvre la demande courante des « puces de couleur » sans balisage supplémentaire.

Listes ordonnées : chiffres, lettres et chiffres romains

<ol> a des attributs pour sa numérotation :

Attribut	Exemple	Résultat
`type`	`type="a"`	a, b, c (`A`, `i`, `I` et `1` marchent aussi)
`start`	`start="5"`	Commence à compter à 5
`reversed`	`reversed`	Compte à rebours
`value` (sur `<li>`)	`<li value="10">`	Cet élément vaut 10, les suivants continuent à partir de là

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type a sa place en HTML car les lettres peuvent porter un sens (« choisissez l'option B »). Pour des changements purement visuels, le CSS list-style-type: upper-alpha ou lower-roman fait la même chose.

Listes imbriquées

Une sous-liste va dans le <li> auquel elle appartient, après le texte de cet élément. Les navigateurs changent la puce à chaque niveau : disque, puis cercle, puis carré.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Notez où se place </li> : l'élément « Frontend » ne se ferme qu'après sa sous-liste. Le fermer avant le <ul> place la sous-liste directement dans le <ul> extérieur, ce qui est invalide même si le rendu est presque identique.

Les listes ordonnées s'imbriquent de la même façon, et la numérotation repart de 1 dans chaque sous-liste. Pour des numéros comme 1.1 et 1.2, il faut des compteurs CSS.

Listes de définitions : dl, dt et dd

Une liste de définitions associe des termes à leurs descriptions : un glossaire, les détails d'une commande, des paires façon FAQ. <dt> est le terme et <dd> la description :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Un terme peut avoir plusieurs <dd>, et plusieurs <dt> peuvent partager un seul <dd>. Les navigateurs mettent <dd> en retrait par défaut ; la règle margin ci-dessus le supprime. Pour des données sur plusieurs colonnes, un tableau convient mieux.

Listes sans puces : menus et listes horizontales

Les menus de navigation sont des listes de liens. Retirez les puces avec list-style: none et le retrait avec padding: 0, puis disposez les éléments en ligne avec flexbox :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

La liste reste une liste pour les lecteurs d'écran (« navigation, liste, 3 éléments »). Une exception : Safari avec VoiceOver peut perdre la nature de liste quand les puces sont retirées. Si le nombre d'éléments compte pour vos utilisateurs, ajoutez role="list" au <ul>.

Espacement par défaut

Les navigateurs donnent aux listes une marge haute et basse de 1em et un retrait avec padding-inline-start: 40px, là où se trouvent les puces. Le padding est côté début, donc dans les langues de droite à gauche, les puces et le retrait passent automatiquement de l'autre côté. Retirez le padding et les puces sortent de la boîte de la liste, où elles peuvent être coupées ; gardez un peu de padding ou utilisez list-style-position: inside.

Erreurs fréquentes

Un <li> sans liste parente. Il doit se trouver dans <ul>, <ol> ou <menu>.
Une liste imbriquée hors de son <li>. Placez la sous-liste dans l'élément auquel elle appartient.
Du texte ou d'autres balises directement dans <ul>, comme <ul><p>Note</p><li>...</li></ul>. Déplacez-les dans un <li> ou hors de la liste.
Taper les puces ou les numéros à la main avec • et <br>. Les lecteurs d'écran entendent un paragraphe, pas une liste.
list-style: none sans padding: 0, ce qui laisse un mystérieux retrait de 40 pixels.
Utiliser <ol> pour l'apparence. Si l'ordre n'importe pas, utilisez <ul> et stylisez-le.

Questions fréquentes

Comment faire une liste à puces en HTML ?

Utilisez une liste non ordonnée : <ul> avec un <li> par puce, par exemple <ul><li>Milk</li><li>Eggs</li></ul>. Le navigateur dessine une puce devant chaque élément et met la liste en retrait.

Quelle est la différence entre ul et ol ?

<ul> est une liste non ordonnée, affichée avec des puces, pour des éléments dont l'ordre n'importe pas. <ol> est une liste ordonnée, affichée avec des numéros, pour des étapes et des classements où l'ordre compte. Les deux contiennent des éléments <li>.

Comment enlever les puces d'une liste en HTML ?

Définissez list-style: none sur le <ul> en CSS. Définissez aussi padding-inline-start: 0 (ou padding: 0) pour supprimer le retrait que le navigateur ajoute pour les puces.

Comment commencer une liste numérotée à un autre nombre ?

Utilisez l'attribut start : <ol start="5"> numérote le premier élément 5. reversed compte à rebours, et value sur un <li> fixe le numéro de cet élément et des suivants.

Comment faire une liste imbriquée en HTML ?

Placez le <ul> ou <ol> intérieur dans un <li> de la liste extérieure, après le texte de cet élément. Une liste placée directement dans un autre <ul>, entre des éléments <li>, est invalide.

Concepts liés