Les listes ordonnées et non ordonnées
Les listes ordonnées et non ordonnées
- 1Les listes HTML organisent l'information avec <ul> pour les puces et <ol> pour la numérotation
- 2Chaque élément d'une liste utilise la balise <li> comme conteneur
- 3Les listes peuvent être imbriquées pour créer des structures hiérarchiques complexes
Introduction : Structurer l'information avec les listes
Dans le développement web, organiser l'information de manière claire est essentiel. Les listes HTML constituent l'un des outils fondamentaux pour structurer le contenu et améliorer la lisibilité. Que ce soit pour un menu de navigation, une liste de produits ou des étapes d'un processus, maîtriser les balises de listes vous permettra de créer des sites web bien organisés et accessibles.
Les types de listes en HTML
La liste non ordonnée (<ul>)
La liste non ordonnée utilise des puces ou symboles pour marquer chaque élément. Elle est idéale quand l'ordre des éléments n'a pas d'importance.
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Liste de courses</title>
6</head>
7<body>
8 <h2>Ma liste de courses</h2>
9 <ul>
10 <li>Pommes</li>
11 <li>Pain</li>
12 <li>Lait</li>
13 <li>Fromage</li>
14 </ul>
15</body>
16</html>💡 À retenir : La balise
<ul>(unordered list) crée automatiquement des puces devant chaque élément<li>(list item).
La liste ordonnée (<ol>)
La liste ordonnée numérote automatiquement les éléments dans l'ordre d'apparition. Parfaite pour des étapes, des classements ou des instructions.
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Recette de crêpes</title>
6</head>
7<body>
8 <h2>Étapes de préparation des crêpes</h2>
9 <ol>
10 <li>Mélanger la farine et les œufs</li>
11 <li>Ajouter le lait progressivement</li>
12 <li>Laisser reposer 30 minutes</li>
13 <li>Faire chauffer la poêle</li>
14 <li>Verser une louche de pâte</li>
15 </ol>
16</body>
17</html>🎯 En pratique : Les navigateurs numérotent automatiquement les éléments d'une liste ordonnée. Même si vous modifiez l'ordre des
<li>, la numérotation s'ajuste automatiquement !
Comparaison des types de listes
| Type de liste | Balise | Marqueur par défaut | Usage recommandé |
|---|---|---|---|
| Non ordonnée | <ul> | Puce (•) | Éléments sans ordre spécifique |
| Ordonnée | <ol> | Numéros (1, 2, 3...) | Étapes, classements, séquences |
| De définitions | <dl> | Aucun | Glossaires, FAQ |
Personnalisation des listes avec CSS
Les listes peuvent être stylisées pour s'adapter au design de votre site :
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Listes stylisées</title>
6 <style>
7 .custom-list {
8 list-style-type: none; /* Supprime les puces par défaut */
9 padding-left: 0;
10 }
11
12 .custom-list li {
13 background: #f0f0f0;
14 margin: 5px 0;
15 padding: 10px;
16 border-left: 4px solid #007bff;
17 }
18
19 .numbered-list {
20 list-style-type: upper-roman; /* Chiffres romains */
21 }
22 </style>
23</head>
24<body>
25 <h3>Liste personnalisée</h3>
26 <ul class="custom-list">
27 <li>Premier élément stylisé</li>
28 <li>Deuxième élément stylisé</li>
29 <li>Troisième élément stylisé</li>
30 </ul>
31
32 <h3>Liste avec chiffres romains</h3>
33 <ol class="numbered-list">
34 <li>Premier point</li>
35 <li>Deuxième point</li>
36 <li>Troisième point</li>
37 </ol>
38</body>
39</html>Les listes imbriquées
Les listes peuvent contenir d'autres listes pour créer des structures hiérarchiques :
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Plan de cours</title>
6</head>
7<body>
8 <h2>Plan du cours HTML</h2>
9 <ol>
10 <li>Introduction au HTML
11 <ul>
12 <li>Historique</li>
13 <li>Syntaxe de base</li>
14 <li>Structure d'un document</li>
15 </ul>
16 </li>
17 <li>Les balises fondamentales
18 <ul>
19 <li>Balises de texte</li>
20 <li>Balises de listes
21 <ul>
22 <li>Listes ordonnées</li>
23 <li>Listes non ordonnées</li>
24 </ul>
25 </li>
26 <li>Balises de liens</li>
27 </ul>
28 </li>
29 </ol>
30</body>
31</html>⚠️ Attention : Dans les listes imbriquées, chaque sous-liste doit être placée à l'intérieur d'un élément
<li>de la liste parent, pas directement après.
Le saviez-vous ?
Le premier site web de l'histoire (info.cern.ch, créé en 1990) utilisait déjà des listes pour organiser les liens vers d'autres pages. Les listes HTML font partie des tout premiers éléments du langage !
— Archives du CERN et histoire du World Wide Web
Attributs avancés des listes ordonnées
Les listes ordonnées acceptent plusieurs attributs pour personnaliser la numérotation :
1<!-- Commencer à partir de 5 -->
2<ol start="5">
3 <li>Cinquième étape</li>
4 <li>Sixième étape</li>
5 <li>Septième étape</li>
6</ol>
7
8<!-- Numérotation inversée (countdown) -->
9<ol reversed>
10 <li>Troisième place</li>
11 <li>Deuxième place</li>
12 <li>Première place</li>
13</ol>
14
15<!-- Changer le type de numérotation -->
16<ol type="A">
17 <li>Point A</li>
18 <li>Point B</li>
19 <li>Point C</li>
20</ol>💡 À retenir : L'attribut
typepeut prendre les valeurs :1(défaut),A,a,I,ipour différents styles de numérotation.
Bonnes pratiques pour les listes
Accessibilité et sémantique
- Utilisez toujours la balise appropriée selon le contexte
- Les listes améliorent la navigation pour les lecteurs d'écran
- Évitez d'utiliser des listes uniquement pour l'indentation visuelle
Structure logique
🎯 En pratique : Pour un menu de navigation, utilisez
<ul>car l'ordre des liens n'affecte généralement pas leur importance. Pour des instructions de montage, utilisez<ol>car l'ordre des étapes est crucial.