Dans ce chapitre, vous allez découvrir comment créer des listes. Elles permettent une présentation claire et esthétique des énumérations.
On distingue trois types de listes : les listes énumératives, les listes ordonnées et les listes de définitions.

Les listes énumératives

Une liste énumérative est encadrée par les balises <ul></ul> (ul signifiant unordered list, c'est-à-dire liste non ordonnée), et chaque entrée de cette liste par les balises <li></li>.

On a donc par exemple :

<ul>
 <li>France</li>
 <li>Espagne</li>
 <li>Royaume-Uni</li>
 <li>Allemagne</li>
</ul>

Ce qui devrait donner approximativement ceci :

• France
• Espagne
• Royaume-Uni
• Allemagne

Les listes ordonnées

Ici, les éléments seront automatiquement numérotés. On utilisera les balises <ol></ol> pour encadrer la liste, et toujours les <li></li> pour chaque entrée.

Reprenons le même exemple que précédemment :

<ol>
 <li>France</li>
 <li>Espagne</li>
 <li>Royaume-Uni</li>
 <li>Allemagne</li>
</ol>

Ce qui donnerait :

1. France
2. Espagne
3. Royaume-Uni
4. Allemagne

Les listes de définitions

Les listes de définitions sont souvent utilisées pour réaliser des glossaires. Chaque entrée comporte un terme à définir, suivi de sa définition.
Une liste de définition est encadrée par les balises <dl></dl>. Chaque terme est encadré par <dt></dt> et sa définition par <dd></dd>.

On peut donc avoir par exemple :

<dl>
 <dt>Balise</dt>
 <dd>En XHTML, les balises servent à identifier et mettre en forme les éléments d'un document.</dd>
 <dt>XHTML</dt>
 <dd>Extensible Hypertext Markup Language</dd>
</dl>

Le résultat devrait ressembler à cela :

Balise 

En XHTML, les balises servent à identifier et mettre en forme les éléments d'un document.

XHTML 

Extensible Hypertext Markup Language

Imbrication de listes

Il est possible d'imbriquer des listes, même de types différents. Par exemple :

<ol>
 <li>Introduction</li>
 <li>Présentation</li>
 <li>Fonctionnalités
    <ul>
    <li>Fonctionnalités de base</li>
    <li>Fonctionnalités avancées</li>
    </ul>
 </li>
 <li>Conclusion</li>
</ol>

Qui correspond à ceci :

1. Introduction
2. Présentation
3. Fonctionnalités
   • Fonctionnalités de base
   • Fonctionnalités avancées
4. Conclusion

Voilà, c’est déjà la fin de ce court chapitre sur les listes. Le prochain chapitre traitera des différents éléments de présentation.