Les listes

Dès qu'on énumère — des règles, des étapes, des ingrédients — on écrit une liste. En HTML, une liste demande toujours deux balises imbriquées : une pour la liste entière, une pour chaque élément.

🎯 Objectifs

À la fin de ce cours, tu seras capable de :

1. Écrire une liste à puces et une liste numérotée.
2. Justifier ton choix entre les deux.
3. Imbriquer une liste dans une autre.
4. Repérer l'erreur classique d'un élément placé hors de sa liste.

Une liste, deux balises

<ul>
  <li>Le Colisée</li>
  <li>Le Panthéon</li>
  <li>Le Trastevere</li>
</ul>

• <ul> — 🇬🇧 unordered list, liste non ordonnée — c'est la liste entière.
• <li> — 🇬🇧 list item — c'est un élément, répété autant de fois que nécessaire.

Chaque <li> est imbriqué dans le <ul> : il s'ouvre et se ferme entièrement à l'intérieur. C'est pour cela qu'on décale les <li> de deux espaces vers la droite — le décalage montre l'imbrication d'un coup d'œil.

Tu n'écris jamais les puces toi-même. C'est le navigateur qui les ajoute.

Quand l'ordre compte

La liste numérotée s'écrit exactement pareil, avec <ol> — 🇬🇧 ordered list — à la place de <ul>.

<ol>
  <li>Utilise un mot de passe différent pour chaque compte.</li>
  <li>Active la vérification en deux étapes.</li>
  <li>Installe les mises à jour dès qu'elles sont proposées.</li>
</ol>

Là non plus tu n'écris pas les numéros : le navigateur les calcule. Et c'est un vrai avantage. Le jour où tu insères un conseil au milieu, toute la numérotation se met à jour toute seule.

Choisir entre les deux

La question à se poser est simple : est-ce que changer l'ordre changerait le sens ?

🧠 À retenir : le choix entre <ul> et <ol> n'est pas une question d'apparence. Il porte du sens, et ce sens est lu par les moteurs de recherche comme par les lecteurs d'écran.

Une liste dans une liste

Un <li> peut contenir une liste complète. On obtient une liste à deux niveaux.

<ul>
  <li>Rome
    <ul>
      <li>Le Colisée</li>
      <li>Le Panthéon</li>
    </ul>
  </li>
  <li>Lisbonne</li>
</ul>

Regarde bien où se ferme le premier </li> : après la liste imbriquée. La sous-liste fait partie de l'élément « Rome », elle vit à l'intérieur.

C'est exactement le principe des boîtes rangées les unes dans les autres. Et c'est là que le décalage du code devient indispensable : sans lui, personne ne s'y retrouve.

L'erreur classique

<ul>
  <li>Le Colisée</li>
</ul>
<li>Le Panthéon</li>     ❌ hors de la liste

Le second <li> est écrit après le </ul>. Il se retrouve orphelin, hors de toute liste. Selon le navigateur, il s'affichera sans puce, mal aligné, ou dans un endroit inattendu.

La règle : tous les <li> vivent entre <ul> et </ul>, sans exception.

⚠️ Attention : un <ul> ne peut contenir que des <li>. Un paragraphe ou un titre placé directement dans un <ul> est une erreur — même si le navigateur fait semblant de l'accepter.

🧪 Vérifications

1. Quelles sont les deux balises d'une liste à puces, et laquelle contient l'autre ?
2. Tu écris un classement des cinq meilleurs buteurs. Quelle liste choisis-tu ?
3. Où faut-il fermer le <li> qui contient une sous-liste ?
4. Que se passe-t-il si tu écris un <li> après le </ul> ?

✍️ À retenir

• Une liste, c'est deux balises : le conteneur (<ul> ou <ol>) et les éléments (<li>).
• <ul> quand l'ordre est libre, <ol> quand il porte du sens.
• Les puces et les numéros sont ajoutés par le navigateur, jamais écrits à la main.
• Une liste peut vivre à l'intérieur d'un <li> pour créer un second niveau.
• Tous les <li> doivent être à l'intérieur de leur liste.

Suite

Ta page a un plan et des énumérations. Elle est encore isolée du reste du web : on va lui ajouter un lien et une image.