Listes HTML

À quoi servent les listes

Une liste marque un groupe d’éléments liés comme un groupe. Les navigateurs et les technologies d’assistance peuvent annoncer combien d’éléments existent et les parcourir un par un. Cette structure aide le survol, les plans et les recettes. Le sens disparaît si vous simulez des puces avec des tirets aléatoires dans des paragraphes, ou si vous étirez ul seulement pour pousser du texte en colonnes visuelles. Choisissez le balisage de liste quand le contenu est vraiment un ensemble ou une séquence. Gardez l’espacement décoratif et la grille pour le CSS plus tard.

Réponse directe

• ul — liste non ordonnée (puces par défaut dans le navigateur)
• ol — liste ordonnée (numéros par défaut)
• li — chaque élément de liste
  Imbriquez un autre ul ou ol dans un li quand vous avez besoin de sous-éléments. Ne laissez pas un li flotter hors de sa liste parente. Les balises de fermeture doivent s’imbriquer dans l’ordre inverse des ouvertures, surtout après avoir ajouté une sous-liste sous une étape.

Quand utiliser quelle liste

Choisissez l’élément qui correspond à l’idée que vous écrivez, pas au look que vous espérez du CSS plus tard. Puces et numéros sont des présentations par défaut ; la décision HTML porte sur le fait que l’ordre fasse partie du sens.

Liste non ordonnée

Une liste de courses à puces est la démo classique de ul. Chaque élément est un li. Commencez ici quand les éléments sont pairs — noms de fruits, libellés de hobby ou points forts de fonctionnalités qui pourraient être mélangés sans casser la leçon.

Lire l’exemple non ordonné

• ul ouvre le conteneur de liste non ordonnée
• Chaque li est un élément de ce groupe
• Les balises de fermeture doivent s’imbriquer correctement : terminez chaque li avant de fermer le ul
• Les puces par défaut sont un style navigateur ; le CSS pourra changer les marqueurs plus tard, mais le sens HTML reste « ensemble non ordonné »
• Les li vides et fermetures manquantes sont des typos courants — regardez la page tôt pour les attraper

Liste ordonnée avec sous-liste imbriquée

Les étapes numérotées ont souvent besoin d’un petit groupe de puces sous une étape — fichiers à créer, outils à ouvrir ou ingrédients pour cette seule étape. Placez la liste interne dans le li de cette étape, pas comme sœur à côté de tout le ol. Les numéros externes restent lisibles tandis que les puces internes clarifient le détail.

Lire l’exemple imbriqué

• Le ol externe numérote les étapes principales en séquence
• Le deuxième li contient un texte d’intro plus un ul enfant
• Les li internes appartiennent au ul imbriqué ; ce ul se ferme avant la fermeture du li parent
• La troisième étape continue la séquence ordonnée externe après la fin du bloc imbriqué
• Ce motif s’étend à des nids plus profonds, mais gardez les arbres débutants peu profonds pour que l’ordre ouvrir/fermer reste évident
• Si les numéros semblent « faux », vérifiez si un li a été fermé trop tôt et a poussé la liste imbriquée dehors

Le sens d’abord, le style ensuite

Les navigateurs dessinent puces et numéros sans CSS supplémentaire. Cette commodité pousse à détourner les listes en machines d’indentation ou faux sidebars. Résistez ici. Si le contenu est un ensemble ou une séquence, le balisage de liste est le bon choix sémantique même avant de restyler les marqueurs. Si vous avez besoin de cartes côte à côte, d’une grille de nav ou de colonnes de magazine, attendez les leçons CSS et de layout structurel — ne tordez pas ul en framework de page juste parce que les menus utilisent parfois des listes plus tard avec un style soigné.

Accessibilité et habitudes de survol

Les listes aident à survoler et aident les technologies d’assistance à annoncer des phrases comme « liste de trois éléments ». Gardez chaque li centré sur une idée quand vous pouvez. Évitez de bourrer d’énormes paragraphes sans lien dans chaque élément sauf si le contenu en a vraiment besoin. N’imbriquez que lorsque la hiérarchie est réelle — une imbrication factice juste pour indenter confond humains et outils. Un court titre au-dessus de la liste clarifie souvent le sujet du groupe avant la première puce.

Pratiquez dans votre éditeur

1. Faites un ul de trois hobbies (ou trois aliments — gardez les éléments courts).
2. Faites un ol de trois étapes du matin dans l’ordre où vous les faites vraiment.
3. Imbriquez un petit ul sous l’un de ces li (par exemple fichiers à ouvrir ou outils à prendre).
4. Validez mentalement : chaque li est dans un ul ou ol ; les listes imbriquées sont dans un li.
5. Échangez le type d’une liste (ul ↔ ol) et demandez si le sens correspond encore au contenu.
6. Affichez la page dans un navigateur et confirmez que puces/numéros apparaissent sans écrire de CSS encore.
7. Cassez l’imbrication exprès une fois, notez à quel point le plan a l’air faux, puis corrigez les fermetures.

Erreurs faciles

• Écrire li hors de tout ul/ol (éléments orphelins)
• Utiliser les listes seulement pour indenter des paragraphes au hasard ou simuler des colonnes
• Oublier de fermer les listes imbriquées dans le bon ordre
• Placer un ul imbriqué comme frère de li au lieu de l’intérieur d’un li
• Choisir ol pour des éléments sans séquence (ou ul pour des numéros d’étapes stricts) sans penser au sens
• Copier du balisage de liste depuis des tutoriels layout-only qui traitent ul comme grille de menu sans enseigner la sémantique d’abord
• Laisser la liste externe non fermée après un long bloc imbriqué

Résumé

• ul + li pour les ensembles non ordonnés (puces par défaut)
• ol + li pour les séquences ordonnées (numéros par défaut)
• Imbriquez une sous-liste dans un li, pas à côté de la liste parente
• Choisissez le type de liste qui correspond au sens
• N’utilisez pas les listes comme substitut des colonnes de layout CSS
• Après la note historique sur les plug-ins, les listes vous ramènent au HTML structurel du quotidien que vous continuerez à réutiliser