Cours HTML / Créer des listes avec ul, ol et dl et les imbriquer

Choisissez ol lorsque l'ordre des éléments compte, ul lorsqu'il ne compte pas, et dl pour les noms associés à des descriptions ou des valeurs. Ces éléments décrivent les relations entre les éléments ; leurs numéros et puces par défaut sont seulement une présentation.

Quand devriez-vous utiliser ol, ul ou dl ?

Les éléments dans ol et ul utilisent li. Dans un dl, dt fournit un nom et dd fournit sa description ou sa valeur.

Essayez les trois types de listes dans un même fichier

Enregistrez ce code en tant que fichier HTML et ouvrez-le dans un navigateur pour comparer les présentations par défaut des listes. Le CSS demande la police Noto Sans KR si elle est installée ; sinon, le navigateur utilise une police sans empattement de remplacement.

<!doctype html>

<html lang="fr">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Listes HTML</title>

    <style>

      body { font-family: "Noto Sans KR", sans-serif; }

    </style>

  </head>

  <body>

    <h1>Préparer un voyage</h1>

    <h2>Fournitures</h2>

    <ul>

      <li>Eau</li>

      <li>Carte</li>

    </ul>

    <h2>Étapes</h2>

    <ol>

      <li>Choisir les dates</li>

      <li>Préparer un sac</li>

    </ol>

    <h2>Termes</h2>

    <dl>

      <dt>Départ</dt>

      <dd>Le jour où le voyage commence</dd>

      <dt>Arrivée</dt>

      <dd>Le jour où vous arrivez à destination</dd>

    </dl>

  </body>

</html>

Le CSS peut modifier l'indentation et les styles des marqueurs. La distinction importante est la relation ordre ou nom–description exprimée par le HTML.

Modifier la numérotation d'une liste ordonnée

Un ol commence par 1 par défaut. Son attribut start change le premier numéro ; value sur un li particulier change le numéro de cet élément.

<ol start="5">

  <li>Cinquième étape</li>

  <li value="9">Neuvième étape</li>

  <li>Dixième étape</li>

</ol>

Les marqueurs sont 5, 9 et 10. Utilisez reversed lorsque la numérotation doit descendre.

<ol reversed>

  <li>Troisième élément</li>

  <li>Deuxième élément</li>

  <li>Premier élément</li>

</ol>

Placée seule, cette liste inversée sans valeur de départ compte à rebours à partir de ses trois éléments comme 3, 2, 1. Vérifiez si la numérotation correspond à la séquence prévue.

Les attributs de numérotation ne transforment pas une collection non ordonnée en une séquence significative. Choisissez d'abord le type de liste pour son sens.

Associez les noms et les descriptions avec dl

Un dl n’est pas limité aux définitions de dictionnaire. Il peut associer une propriété de produit à sa valeur ou une date à sa description. Gardez chaque entrée dt et dd facile à associer.

<dl>

  <dt>Horaires d’ouverture</dt>

  <dd>En semaine, de 9 h à 18 h</dd>

  <dt>Fermé</dt>

  <dd>Samedi et dimanche</dd>

</dl>

Ce sont des horaires fictifs utilisés uniquement pour démontrer le balisage.

Imbriquez une liste à l’intérieur d’un élément de liste

Une sous-liste appartient à l'intérieur du li parent qu'elle développe. Ici, les articles de vêtements sont un sous-ensemble des fournitures de voyage. Voir Syntaxe HTML pour la règle de l'imbrication inversée.

<ul>

  <li>Eau</li>

  <li>Vêtements

    <ul>

      <li>Veste</li>

      <li>Chaussettes</li>

    </ul>

  </li>

</ul>

Vous pouvez également imbriquer un ul à l'intérieur d'un ol. Dans cet exemple, les étapes principales ont un ordre significatif, mais les deux affaires à mettre dans le sac n'en ont pas.

<ol>

  <li>Choisir les dates du voyage</li>

  <li>Préparer un sac

    <ul>

      <li>Vêtements</li>

      <li>Affaires de toilette</li>

    </ul>

  </li>

  <li>Partir en voyage</li>

</ol>

Ne placez pas une sous-liste directement sous un ul ou ol extérieur ; mettez-la à l'intérieur du li pertinent. Évitez également de placer une liste entière à l'intérieur d'un p. Les listes et les paragraphes sont des structures séparées.

Liste de contrôle pour la rédaction de listes

• Décidez si l'ordre des éléments change le sens avant de choisir ol ou ul.
• Utilisez li pour chaque élément d'une liste ordonnée ou non ordonnée.
• Clarifiez la relation dt–dd dans une liste de description.
• Placez une sous-liste à l'intérieur de son parent li, et utilisez le CSS pour l'apparence du marqueur.

Pour plus d'exemples, consultez le guide de MDN sur les listes HTML. Pour utiliser une liste dans un véritable ensemble de pages, commencez avec la structure de fichier dans Créer un petit site web multipages.