Listes

Dernière mise à jour le 4 octobre 2022

Listes

Liste à puces

La liste à puces (ou sans ordre) sert à faire des énumérations.

Elle est constituée d’un élément ul (unordered list) pour représenter la liste et d'éléments li (list item) pour représenter chacun des éléments de la liste.

Elle affiche chacun des éléments dans l’ordre où ils sont écrits.

Les éléments de la liste sont marqués par défaut d’un petit cercle noir (puce).

Par exemple, le code suivant :

<ul>
  <li>Frodon</li>
  <li>Sam</li>
  <li>Merry</li>
  <li>Pippin</li>
</ul>

produira la sortie suivante :

Le marqueur peut être modifié à l’aide de l’attribut style de la façon suivante :

<style>
  ul {
    list-style: square;
  }
</style>

Les valeurs possible de l'attribut list-style sont :

• disc : cercle noir (valeur par défaut)
• circle : anneau noir
• square : carré noir
• none : aucun marqueur (pas de puces)

Liste ordonnée

La différence entre une liste à puces et une liste ordonnée est au niveau du marqueur.

Alors que les éléments d’une liste à puces ont tous le même marqueur, ceux d’une liste ordonnée auront des marqueurs différents (généralement des nombres)

Elle est constituée de l'élément ol (ordered list).

Le code suivant :

<ol>
  <li>Frodon</li>
  <li>Sam</li>
  <li>Merry</li>
  <li>Pippin</li>
</ol>

produira la sortie suivante :

Le marqueur peut être modifié à l’aide de l’attribut style de la façon suivante :

<style>
  ul {
    list-style: square;
  }
  ol {
    list-style: lower-latin;
  }
</style>

Les valeurs possible de l'attribut list-style sont :

• decimal : nombres décimaux (valeur par défaut)
• upper-latin : lettre majuscules
• lower-latin : lettres minuscules
• upper-roman : chiffres romains avec lettres majuscules
• lower-roman : chiffres romains avec lettres minuscules

Liste de description

Un peu moins utilisée que les autres, la liste de description associe une description à chacun de ses éléments.

Elle est constituée d’un élément dl (description list) et chaque élément de la liste sera constitué d’un élément dt (description term) et d’un ou plusieurs élément dd (definition description).

Le code suivant :

<h3>Types de hobbits</h3>
<dl>
  <dt>Piévelus</dt>
    <dd>petits et imberbes</dd>
    <dd>vivent dans les hautes terres et les collines</dd>
    <dd>branche la plus nombreuse</dd>
  <dt>Fortauds</dt>
    <dd>grands et lourds</dd>
    <dd>vivent au bord des rivières</dd>
  <dt>Peaublêmes</dt>
    <dd>peau et cheveux pâles</dd>
    <dd>vivent dans la forêt</dd>
</dl>

produira la sortie suivante :

Listes imbriquées

Il est aussi possible de créer une liste à l'intérieur d'une autre liste.

On dit alors qu'il s'agit d'une liste imbriquée.

Regardons un exemple de liste imbriquée. Commençons par créer une liste de catégories de personnages :

<ul>
  <li>Hobbits</li>
  <li>Magiciens</li>
  <li>Hommes</li>
</ul>

ce qui donnera la sortie suivante :

Maintenant, voyons comment insérer une sous-liste de personnages. Il faut commencer par "couper" après le noeud de texte...

<ul>
  <li>Hobbits <-- couper ici

  </li>
  <li>Magiciens</li>
  <li>Hommes</li>
</ul>

et insérer une nouvelle liste... Remarque : en respectant l'indentation on s'évite bien des problèmes!

<ul>
  <li>Hobbits
    <ul>  <--+
             |
             +-- nouvelle liste
             |
    </ul> <--+
  </li>
  <li>Magiciens</li>
  <li>Hommes</li>
</ul>

Puis, on insère les éléments de la liste...

<ul>
  <li>Hobbits
    <ul>
      <li>Bilbo</li>
      <li>Frodon</li>
      <li>Sam</li>
    </ul>
  </li>
  <li>Magiciens</li>
  <li>Hommes</li>
</ul>

Résultat :

Exemple complet :

<ul>
  <li>Hobbits <!-- le </li> n'est pas ici quand ajoute une sous-liste -->
    <ul>
      <li>Bilbo</li>
      <li>Frodon</li>
      <li>Sam</li>
    </ul>
  </li> <!-- il est ici, après la sous-liste -->
  <li>Magiciens
    <ul>
      <li>Gandalf</li>
      <li>Saroumane</li>
      <li>Radagast</li>
    </ul>
  </li>
  <li>Hommes
    <ol>
      <li>Dúnedains
        <ul>
          <li>Aragorn</li>
          <li>Boromir</li>
        </ul>
      </li>
      <li>Rohirrims
        <ul>
          <li>Théoden</li>
          <li>Éowyn</li>
        </ul>
      </li>
    </ol>
  </li>
</ul>

ce qui donnera la sortie suivante :

On remarque plusieurs choses ici :

• Il n'y a pas de limite aux nombre de niveaux d'imbrication (sauf l'espace disponible!).
• Le marqueur change à chaque niveau d'imbrication.
• On peut mélanger listes à puces et listes ordonnées.