Les listes sont un moyen sémantique essentiel pour grouper et structurer un ensemble d’éléments liés, comme une liste de courses, les étapes d’une recette, ou les points clés d’un argumentaire. HTML propose principalement deux types de listes : les listes non ordonnées et les listes ordonnées.
Les listes non ordonnées (<ul>)
On utilise la balise <ul> (Unordered List) lorsque l’ordre des éléments n’a pas d’importance. Chaque élément de la liste est défini par une balise <li> (List Item).
Par défaut, les navigateurs affichent ces listes avec une puce (un point, un cercle ou un carré) devant chaque élément.
- Type d’élément : Les balises
<ul>et<li>sont des éléments de type bloc. Cela signifie qu’elles commencent sur une nouvelle ligne et occupent toute la largeur disponible.
<!-- Exemple de liste de courses -->
<h3>Liste de courses</h3>
<ul>
<li>Pain</li>
<li>Lait</li>
<li>Fromage</li>
</ul>
Les listes ordonnées (<ol>)
On utilise la balise <ol> (Ordered List) lorsque la séquence des éléments est importante, comme pour des instructions ou un classement. Tout comme pour les listes non ordonnées, chaque élément est défini par une balise <li>.
Par défaut, les navigateurs numérotent automatiquement chaque élément (1, 2, 3, etc.).
- Type d’élément : Les balises
<ol>et<li>sont également des éléments de type bloc.
<!-- Exemple d'étapes d'une recette -->
<h3>Préparation</h3>
<ol>
<li>Préchauffer le four.</li>
<li>Mélanger les ingrédients secs.</li>
<li>Ajouter les ingrédients humides et mélanger.</li>
<li>Enfourner pour 30 minutes.</li>
</ol>
L’imbrication des listes
HTML permet d’imbriquer des listes les unes dans les autres pour créer des structures hiérarchiques plus complexes. La règle d’or est qu’une liste imbriquée doit toujours être placée à l’intérieur d’un élément <li> de la liste parente, et non directement comme enfant d’une balise <ul> ou <ol>.
L’imbrication fonctionne avec n’importe quelle combinaison de listes ordonnées et non ordonnées.
<h3>Plan du document</h3>
<ol>
<li>Introduction
<ul>
<li>Contexte</li>
<li>Problématique</li>
</ul>
</li>
<li>Développement
<ul>
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
</li>
<li>Conclusion</li>
</ol>
Dans cet exemple, les listes non ordonnées <ul> sont correctement imbriquées à l’intérieur des <li> de la liste ordonnée <ol> parente. Les navigateurs appliquent généralement une indentation et changent le style des puces pour marquer visuellement les différents niveaux de la hiérarchie.