Utilisation des listes

Les balises des listes en XHTML servent à énumérer des éléments. Il peut s'agir d'une liste de courses à faire, d'idées, de balises, d'éléments d'un menu ou toute autre liste que vous pouvez imaginer. En XHTML, nous avons droits à trois grands groupes d'énumération: les listes de définitions, les listes ordonnées et les listes non ordonnées.

Liste de définitions

La liste de définition (dl: definition list) permet de d'introduire un terme avec la balise dt (dt: definition term) et de lister ces définitions avec la balise dd (dd : definition description).

<dl> <!-- On commence une liste de définitions -->
 <dt>Concept 1</dt>
 <dl>Première description du concept 1</dl>
 <dl>Deuxième description du concept 1</dl>

 <dt>Concept 2</dt>
 <dl>Première description du concept 2</dl>
 <dl>Deuxième description du concept 2</dl>
</dl>

Liste ordonnée

La liste ordonnée est une liste qui, par défaut, affiche une numérotation numérique, 1. 2. 3. etc pour chaque items. Les balises utilisées sont <ol> pour la liste et <li> pour chaque item. On doit l'utiliser lorsque la position séquentielle des items à une signification, on peut penser à une liste d'étapes pour réaliser une tâche.

<ol>
 <li>Penser à une idée</li>
 <li><a href="lien.htm">L'écrire sur papier</a></li>
 <li>Réfléchir et améliorer l'idée</li>
 <li>Retranscrire au propre</li>
</ol>

Ce qui donne:

1. Penser à une idée
2. L'écrire sur papier
3. Réfléchir et améliorer l'idée
4. Retranscrire au propre

Liste non ordonnée

La liste non ordonnée est une suite d'éléments dont la position de chaque item n'a pas de signification particulière. Exemple, la liste des idées lors d'une réunion de remue-méninges. Par défaut, ces listes sont affichés à l'aide d'une puce (un rond noir plein). Les balises utilisées sont <ul> pour la liste et <li> pour chaque item.

<p>Liste d'épicerie</p>
<ul>
 <li>Pain</li>
 <li>Lait</li>
 <li>Légumes</li>
 <li>Fruits</li>
</ul>

Ce qui donne:

Liste d'épicerie

• Pain
• Lait
• Légumes
• Fruits

Balises pour les Listes

• <dd>
• <dir> (déprécié, transitional)
• <dl>
• <dt>
• <li>
• <ol>
• <menu> (deprécié, transitional)
• <ul>

Présentation

On peut présenter les listes de différentes façon grâce au CSS. On peut changer l'indentation, la couleur, la police, les puces, la numérotation, utiliser des images à titre de puce, etc. On peut même présenter sa liste de puce à l'horizontal au lieu de l'afficher à la vertical.

Voici des propriétés CSS spécialement conçues pour les listes.

• list-style
• list-style-type
  Valeurs: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none
• list-style-image
  Valeurs: url(puce.png) | none
• list-style-position
  Valeurs: inside | outside