4. Créer et imbriquer des listes

Sommaire

À la fin de ce chapitre, vous saurez créer des listes à puces, des listes numérotées et des listes de définitions. Vous saurez également vous y prendre pour insérer une liste à l'intérieur d'une autre liste.

4.1 Démarche

Éditez le fichier test.html et ajoutez-y le texte suivant :

<p>Mes fruits préférés sont :</p>
<ul>
  <li>les pommes</li>
  <li>les fraises</li>
  <li>les oranges</li>
</ul>

Enregistrez votre travail, visualisez le fichier dans votre navigateur et observez. Vous venez de créer un paragraphe d'introduction suivi d'une liste à puces contenant trois items.

Éditez de nouveau le fichier test.html. Remplacez simplement <ul> par <ol> et </ul> par </ol>. Enregistrez comme toujours et observez les changements. Votre liste à puces s'est transformée en une liste numérotée.

4.2 Explication

Les balises <ul> et </ul> annoncent respectivement le début et la fin d'une liste à puces, tandis que les balises <ol> et </ol> annoncent le début et la fin d'une liste numérotée.

Comme une liste ne vient jamais sans contenir un ou plusieurs items, il faut trouver un moyen de dire au navigateur où commence et où se termine chacun d'eux. Et là, ce sont les balises <li> et </li> qui entrent en jeu.

Rappelez-vous : le nom des éléments HTML provient de l'anglais. Ainsi, ul vaut pour Unordored List, ol vaut pour Ordored List et li pour List Item.

4.3 Approfondissement

Supposons maintenant que vous vouliez faire quelque chose qui ressemble à ceci :

Nommément, ce que vous voulez faire consiste en une imbrication de listes. Voici à quoi ressemble le code HTML utilisé :

<ul>
  <li>fruits</li>
  <li>légumes :
    <ul>
      <li>céleris</li>
      <li>carottes</li>
      <li>betteraves</li>
    </ul>
  </li>
</ul>

Remarquez comment la liste subordonnée (en italique) s'insère tout juste avant la balise de fermeture de l'item de liste à subdiviser (légumes). Reste à savoir qu'il n'y a théoriquement aucune limite de niveaux et qu'on peut aussi bien insérer une liste numérotée à l'intérieur d'une liste à puces que l'inverse.

4.4 Les listes de définitions

Éditez le fichier test.html et ajoutez-y le texte suivant :

<p>Glossaire HTML :</p>
<dl>
  <dt>Balise</dt>
  <dd>expression concrète d'un élément HTML</dd>
  <dt>HTML</dt>
  <dd>acronyme d'HyperText Markup Language</dd>
</dl>

Enregistrez votre travail, visualisez le fichier dans votre navigateur et observez. Vous venez de créer un paragraphe d'introduction suivi d'une liste de définitions à deux entrées.

4.5 Explications

Essentiellement, les listes de définitions ont été conçues pour créer des entrées de glossaire. L'élément dl vaut pour Definition List et sert à baliser la liste complète. Les éléments dt et dd servent à baliser le terme à définir et sa définition, respectivement. Le premier vaut pour Definition Term, l'autre pour Definition Data.

Ces éléments peuvent être utilisés pour créer autre chose qu'un glossaire. Mais leur logique d'utilisation veut qu'il y ait toujours une correspondance étroite entre les éléments dt et dd.

Tant que cette correspondance est respectée, toutes les combinaisons sont possibles : un seul dd pour un seul dt, plusieurs dd pour un seul dt, un seul dd pour plusieurs dt ou plusieurs dd pour plusieurs dt.

On peut même imbriquer une liste à puces et une liste numérotée à l'intérieur d'une liste de définition, comme dans l'exemple suivant :

Ingrédients
  • 500 ml de riz
  • 3 oeufs battus
  • 500 ml de lait
  • 250 ml de raisins secs
  • 125 ml de sucre
Préparation
  1. faire cuire le riz jusqu'à ce qu'il éclate
  2. ajouter les oeufs dans le lait, le sucre et les raisins
  3. laisser mijoter 10 minutes

Le code est assez complexe, mais vous devriez être capable d'en saisir la logique :

<dl>
<dt>Ingrédients</dt>
<dd>
  <ul>
    <li>500 ml de riz</li>
    <li>3 oeufs battus</li>
    <li>500 ml de lait</li>
    <li>250 ml de raisins secs</li>
    <li>125 ml de sucre</li>
  </ul>
</dd>
<dt>Préparation</dt>
<dd>
  <ol>
    <li>faire cuire le riz jusqu'à ce qu'il éclate</li>
    <li>ajouter les oeufs dans le lait, le sucre et les raisins</li>
    <li>laisser mijoter 10 minutes</li>
  </ol>
</dd>
</dl>

Conclusion

Vous savez maintenant vous servir des éléments ul, ol et li pour créer des listes à puces et des listes numérotées, et des éléments dl, dt et dd pour créer des listes de définitions.

Vous avez également appris ce qu'il faut faire pour imbriquer une liste à l'intérieur d'une autre liste.

Certains contenus d'un curriculum vitæ gagnent à être présentés sous la forme d'une liste. Courez vite appliquer vos nouvelles connaissances pour enrichir la structure de ce précieux document.

À jour le 4 mars 2006