Module 1Les bases du HTML
Chapitre 4 sur 13
Les listes
Listes non ordonnées, ordonnées, imbriquées et listes de définitions.
- ≈ 135 min
- 5 leçons
- 3 vidéos
- 3 exercices
Module 1Les bases du HTML
Chapitre 4 sur 13
Listes non ordonnées, ordonnées, imbriquées et listes de définitions.
Objectifs
Avec ce chapitre, tu sauras…
<ul> et une liste ordonnée <ol> ;type, start et reversed des listes ordonnées ;<dl>, <dt> et <dd> ;Les listes sont partout sur le web, souvent là où on ne les voit pas : un menu de navigation, une liste de produits, les étapes d'un tutoriel, les liens d'un pied de page. Savoir quand utiliser une liste est une marque de HTML sémantique.
Leçon 1
Une liste non ordonnée (unordered list) regroupe des éléments dont l'ordre n'a pas d'importance. Chaque élément est un <li> (list item).
<h2>Ce qu'il faut pour la formation</h2>
<ul>
<li>un ordinateur</li>
<li>Visual Studio Code</li>
<li>un navigateur récent</li>
<li>de la motivation</li>
</ul><h3>Ce qu'il faut pour la formation</h3>
<ul><li>un ordinateur</li><li>Visual Studio Code</li><li>un navigateur récent</li><li>de la motivation</li></ul>Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Les listes non ordonnées ul / li.
Leçon 2
| Attribut | Rôle | Exemple | Résultat |
|---|---|---|---|
type | style de numérotation : 1, a, A, i, I | <ol type="A"> | A, B, C… |
start | numéro de départ | <ol start="5"> | 5, 6, 7… |
reversed | numérotation à l'envers (booléen) | <ol reversed> | 3, 2, 1 |
value (sur li) |
Leçon 3
Leçon 4
| Balise | Rôle |
|---|---|
<dl> | la liste (description list) |
<dt> | le terme (description term) |
<dd> | la description (description details), légèrement décalée |
Leçon 5
| Contenu | Balise | Pourquoi |
|---|---|---|
| menu de navigation | <ul> dans un <nav> | une suite de liens, l'ordre n'a pas de sens logique |
| étapes d'installation | <ol> | l'ordre est essentiel |
| résultats d'un classement | <ol> |
1Pour les étapes d'un tutoriel, on utilise…
2Quel est le seul enfant direct autorisé d'un <ul> ?
3Que fait <ol start="3"> ?
4Dans une liste de descriptions, le terme s'écrit avec…
5Une sous-liste se place…
6Quel attribut numérote à l'envers ?
L'essentiel du chapitre
<ul> : liste sans ordre · <ol> : liste ordonnée · <li> : un élément de liste.<ul> ou un <ol> ne contient que des <li>, et une sous-liste se place dans un <li>.<ol> accepte type, start, reversed ; <li> accepte value.<dl> + <dt> (terme) + <dd> (description) : glossaire, fiche technique, FAQ.<nav> + <ul> + <li> + <a>.| force le numéro d'un élément |
<li value="10"> |
| 10 |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
| la position a un sens |
| liens du pied de page | <ul> | une suite de liens |
| questions fréquentes (FAQ) | <dl> | des couples question/réponse |
| liste de tags d'un article | <ul> | une suite d'étiquettes |
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
Une liste ordonnée (ordered list) s'utilise quand l'ordre compte : des étapes, un classement, une recette. Le navigateur numérote automatiquement.
<h2>Préparer un thé à la menthe</h2>
<ol>
<li>Rincer le thé vert avec un peu d'eau bouillante.</li>
<li>Ajouter la menthe fraîche et le sucre.</li>
<li>Verser l'eau bouillante et laisser infuser 3 minutes.</li>
<li>Servir de haut pour faire mousser.</li>
</ol><h3>Préparer un thé à la menthe</h3>
<ol><li>Rincer le thé vert avec un peu d'eau bouillante.</li><li>Ajouter la menthe fraîche et le sucre.</li><li>Verser l'eau bouillante et laisser infuser 3 minutes.</li><li>Servir de haut pour faire mousser.</li></ol>Tableau: Les attributs de ol
Pour créer une sous-liste, on place une nouvelle liste à l'intérieur d'un <li>, jamais directement dans le <ul>.
<ul>
<li>Front-end
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Back-end
<ul>
<li>PHP</li>
<li>Python</li>
</ul>
</li>
</ul><ul><li>Front-end<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></li><li>Back-end<ul><li>PHP</li><li>Python</li></ul></li></ul><ul><li>Front-end</li><ul><li>HTML</li></ul></ul> s'affiche presque pareil, mais c'est invalide : un <ul> ne peut contenir que des <li>. La sous-liste doit être dans le <li> « Front-end », avant sa balise fermante </li>.
La liste de descriptions (description list) associe des termes à leurs descriptions : un glossaire, une FAQ, une fiche technique.
Tableau: Les trois balises
<h2>Fiche technique du produit</h2>
<dl>
<dt>Processeur</dt>
<dd>Intel Core i5, 12e génération</dd>
<dt>Mémoire</dt>
<dd>16 Go de RAM</dd>
<dt>Stockage</dt>
<dd>SSD de 512 Go</dd>
</dl><h3>Fiche technique du produit</h3>
<dl><dt>Processeur</dt><dd>Intel Core i5, 12e génération</dd><dt>Mémoire</dt><dd>16 Go de RAM</dd><dt>Stockage</dt><dd>SSD de 512 Go</dd></dl>Un terme peut avoir plusieurs descriptions (plusieurs <dd> à la suite), et plusieurs termes peuvent partager la même description.
Pose-toi la question : « est-ce que ce contenu est une suite d'éléments du même type ? ». Si oui, c'est une liste. Puis : « est-ce que l'ordre a un sens ? » → <ol>, sinon → <ul>. Et si chaque élément est un couple terme/description → <dl>.
Tableau: Exemples réels
Crée un glossaire avec <dl> contenant quatre termes vus dans les chapitres 1 à 3 (par exemple : navigateur, balise, attribut, DOM), chacun avec sa définition.
Écris une page « Harira » avec : un titre principal, un sous-titre « Ingrédients » suivi d'une liste non ordonnée (au moins 6 ingrédients), un sous-titre « Préparation » suivi d'une liste ordonnée de 5 étapes. La troisième étape contient une sous-liste de 3 épices.
Ce code est invalide. Explique pourquoi et corrige-le.
<ol>
<li>Installer VS Code</li>
<ol>
<li>Télécharger l'installateur</li>
<li>Lancer l'installation</li>
</ol>
<p>Installer Live Server</p>
</ol><h2>Top 3 des langages du web</h2>
<ol reversed>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
</ol><h3>Top 3 des langages du web</h3>
<ol reversed><li>JavaScript</li><li>CSS</li><li>HTML</li></ol>L'attribut type est valide, mais on préfère souvent la propriété CSS list-style-type, qui offre beaucoup plus de choix (upper-roman, lower-greek, none…). Utilise type seulement quand le style de numérotation fait partie du sens : par exemple un article de loi numéroté « a, b, c ».
Les listes ordonnées. Après le segment, teste toi-même chaque attribut du tableau ci-dessus.
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="projets.html">Projets</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>Presque tous les sites professionnels construisent leur menu avec <nav> + <ul> + <li> + <a>. Le CSS enlève ensuite les puces et aligne les liens horizontalement (tu le feras dans la formation CSS avec Flexbox). Un lecteur d'écran annonce alors « navigation, liste de 3 éléments » : l'utilisateur sait tout de suite combien de liens il y a.
En complément (anglais) : le chapitre « List Types » de Dave Gray, pour revoir les différents types de listes avec d'autres exemples.