Listes

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>R2-D2</li>
  <li>C-3PO</li>
  <li>K-2SO</li>
  <li>BB-8</li>
</ul>

produira la sortie suivante :

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

   style = "list-style-type: square;"

Les valeurs possible de l'attribut list-style-type 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>R2-D2</li>
    <li>C-3PO</li>
    <li>K-2SO</li>
    <li>BB-8</li>
</ol>

produira la sortie suivante :

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

style = "list-style-type: decimal"

Les valeurs possible de l'attribut list-style-type 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 droids dans Star Wars</h3>
<dl>
  <dt>R2-D2</dt>
    <dd>mécanicien polyvalent</dd>
    <dd>aventurier</dd>
    <dd>assistant pilote de chasse</dd>
  <dt>C-3PO</dt>
    <dd>connaissance de plus de sept millions de formes de communication</dd>
    <dd>programmé pour l'étiquette et le protocole</dd>
  <dt>K-2SO</dt>
    <dd>droïde de sécurité impérial </dd>
    <dd>agent d'insertion efficace</dd>
  <dt>BB-8</dt>
    <dd>très rapide </dd>
    <dd>peut piloter les avions de chasse</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

Commençons par créer une liste de catégories de personnages 

<ul>
  <li>Droid</li>
  <li>Jedi</li>
  <li>Non jedi et sith</li>
</ul>

ce qui donnera la sortie suivante :

Maintenant, insérons des liste imbriquées (sous-listes) :

<ul>
  <li>Droid <!-- le </li> n'est pas ici quand ajoute une sous-liste -->
    <ul>
      <li>R2-D2</li>
      <li>C-3PO</li>
      <li>BB-8</li>
    </ul>
  </li> <!-- il est ici, après la sous-liste -->
  <li>Jedi
    <ul>
      <li>Luke Skywalker</li>
      <li>Qui-Gon Jinn</li>
      <li>Yoda</li>
    </ul>
  </li>
  <li>Non Jedi et Sith
    <ol>
      <li>Non Jedi
        <ul>
          <li>Chewbacca</li>
          <li>Han Solo</li>
        </ul>
      </li>
      <li>Sith
        <ul>
          <li>Darth Vader</li>
          <li>Count Dooku</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