Les listes

Pourquoi les listes ?

On fait des listes partout : courses, tâches, instructions. HTML a des balises pour ça.

Utiliser les vraies balises de liste (pas des tirets dans un paragraphe) a des avantages : meilleure accessibilité, meilleur référencement, code plus propre, et facile à styliser.

HTML propose deux types de listes principales.

Liste non ordonnée : <ul>

<ul> = "unordered list" (liste sans ordre). Utilise-la quand l'ordre n'a pas d'importance. Le navigateur affiche des puces devant chaque élément.

Exemples : liste de courses, ingrédients, fonctionnalités, liens de navigation.

HTML

<!-- ul = la liste entière -->
<ul>
  <!-- li = chaque élément de la liste (list item) -->
  <li>Oeufs</li>
  <li>Farine</li>
  <li>Beurre</li>
</ul>

Résultat affiché par le navigateur :

Oeufs
Farine
Beurre

💡

Structure importante : les <li> (éléments de liste) vont toujours à l'intérieur d'un <ul> ou <ol>. Jamais seuls. Dans un <ul>, on ne met que des <li>.

Liste ordonnée : <ol>

<ol> = "ordered list" (liste avec ordre). Utilise-la quand l'ordre est important. Le navigateur numérote automatiquement : 1, 2, 3…

Exemples : étapes d'une recette, instructions d'installation, classement sportif.

HTML

<!-- Les numéros sont générés automatiquement -->
<ol>
  <li>Préchauffer le four à 180°C</li>
  <li>Mélanger la farine et le sucre</li>
  <li>Ajouter les œufs et le beurre fondu</li>
  <li>Verser dans un moule et enfourner 25 minutes</li>
</ol>

✅

Règle simple : si tu peux mélanger les éléments dans n'importe quel ordre → <ul>. Si l'ordre est important (étape 1, étape 2…) → <ol>.

Listes imbriquées : une liste dans une liste

Tu peux mettre une liste dans un élément de liste. Utile pour les hiérarchies — chapitres et sous-chapitres par exemple.

HTML

<ul>
  <li>Développement web
    <!-- Sous-liste à l'intérieur du li -->
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Design graphique</li>
</ul>

Liste de définitions : <dl>

Moins courante, mais utile pour les glossaires. Elle associe des termes à leurs définitions. Comme un dictionnaire : mot, puis sa définition.

HTML

<!-- dl = definition list, dt = term, dd = definition -->
<dl>
  <dt>HTML</dt>
  <dd>Langage de balisage pour structurer le contenu d'une page web.</dd>

  <dt>CSS</dt>
  <dd>Feuille de style pour contrôler l'apparence d'une page HTML.</dd>
</dl>

💡

Listes et CSS : avec list-style: none, tu enlèves les puces. Tu peux alors styliser la liste comme tu veux. C'est comme ça qu'on crée les menus de navigation : une liste HTML, habillée en menu avec CSS. Tu verras ça dans les prochaines leçons.

// à toi de jouer

Ta liste de courses

Objectif : crée une liste de courses (ul) avec au moins 5 articles, puis une liste numérotée (ol) des étapes pour faire un café. Essaie ensuite d'imbriquer une sous-liste (ex: "Produits laitiers" avec "Lait", "Yaourt" en dessous).

Éditeur live

HTML

Résultat

// à retenir

<ul> = liste à puces. Quand l'ordre n'a pas d'importance.
<ol> = liste numérotée. Quand l'ordre est important (étapes, classement).
Chaque élément de liste = <li>. Toujours à l'intérieur d'un <ul> ou <ol>.
On peut imbriquer des listes dans des listes pour créer une hiérarchie.
<dl>, <dt>, <dd> pour les glossaires.
En CSS, tu pourras enlever les puces et styliser les listes comme des menus.