Aujourd'hui, je vous propose un tuto sur les listes et énumérations. Il existe trois types de listes :

• les listes non-ordonnées (à puces) ;
  
• les listes ordonnées ;
  
• les listes de définitions.

1. Liste non-ordonnée

Il s'agit de la liste à puces de base. La structure est assez simple :

• la liste est déclarée avec <ul> (unordered list) ;
  
• chaque élément de la liste est défini par les balises <li> (list item).

Code:

<ul>
   <li>Pomme</li>
   <li>Poire</li>
   <li>Fraise</li>
</ul>

Attribut type

Vous pouvez modifier l'apparence des puces en ajoutant l'attribut type dans la balise ouvrante <ul>. Trois valeurs sont acceptées :

• "disk" : rond plein (par défaut) ;
  
• "square" : carré plein ;
  
• "circle" : rond creux.

Code:

<ul type="square">
   <li>Pomme</li>
   <li>Poire</li>
   <li>Fraise</li>
</ul>

2. Liste ordonnée

Assez semblable à la liste non-ordonnée, la principale différence réside dans la balise principale : on déclare la liste avec <ol> (ordered list). Les balises <li> définissent toujours chaque élément de la liste.

Code:

<ol>
   <li>Premièrement</li>
   <li>Deuxièmement</li>
   <li>Troisièmement</li>
</ol>

Par défaut, cette liste affichera automatiquement 1, 2, 3 et ainsi de suite (pratique pour faire des sommaires).

Attribut type

Comme pour le <ul>, la liste ordonnée possède plusieurs types qui vont nous permettre de choisir entre des suites de chiffres ou de lettres. L'attribut type accepte les valeurs suivantes :

• "A" : alphabet en majuscules - A., B., etc.
  
• "a" : alphabet en minuscules - a., b., etc.
  
• "I" : chiffres romains en majuscules - I., II., etc.
  
• "i" : chiffres romains en minuscules - i., ii., etc.

Code:

<ol type="A">
   <li>Premièrement</li>
   <li>Deuxièmement</li>
</ol>

Attribut start

L'attribut start permet de définir le départ. Il accepte une valeur numérique (un chiffre, quoi !). Automatiquement, il démarrera au niveau qui correspond.

Code:

<ol type="A" start="25">
   <li>Premièrement</li>
   <li>Deuxièmement</li>
   <li>Troisièmement</li>
</ol>

Ici, avec une liste ordonnée de type "alphabet" et un start à "25", on démarre à la 25e lettre de l'alphabet. Une fois arrivé au bout, ça recommence.

25. Premièrement
26. Deuxièmement
27. Troisièmement

3. Liste de définitions

Une liste de définitions se décompose en trois parties :

• le bloc "liste", qui se déclare avec la balise <dl> (definition list) ;
  
• le terme défini, déclaré par la balise <dt> (definition term) ;
  
• la définition du terme, déclaré par la balise <dd> (definition description).

Code:

<dl>
   <dt>HTML</dt>
      <dd>- HyperText Markup Language</dd>
   <dt>Pomme</dt>
      <dd>- Fruit qui se mange</dd>
</dl>

Dans les faits, vous obtenez un décalage des "descriptions" en-dessous des items associés.

HTML

- HyperText Markup Language

Pomme

- Fruit qui se mange