Extensible Hypertext Markup Language/Listes

Début de la boite de navigation du chapitre

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.

fin de la boite de navigation du chapitre

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.