BaliseTonSite

Les listes

Listes ordonnées, non ordonnées et définitions.

Imagine : tu es sur ton chantier avec ton carnet. Tu dois noter les étapes à suivre, les matériaux à acheter ou la légende du plan.

En HTML, les listes jouent exactement ce rôle : elles organisent les infos pour que tout soit clair et facile à lire.

3.1<ol> : Liste ordonnée

Une liste ordonnée s’affiche avec des numéros (1, 2, 3…). Parfaite pour écrire des étapes à suivre, comme un mode d’emploi.

<ol>
  <li>Creuser les fondations</li>
  <li>Monter les murs</li>
  <li>Poser le toit</li>
</ol>
  1. Creuser les fondations
  2. Monter les murs
  3. Poser le toit

3.2<ul> : Liste non ordonnée

Une liste non ordonnée affiche des puces sans ordre précis. Idéale pour écrire ta liste de matériaux ou de courses.

<ul>
  <li>Briques</li>
  <li>Ciment</li>
  <li>Bois</li>
</ul>
  • Briques
  • Ciment
  • Bois

3.3<li> : Élément de liste

Chaque point de la liste est un <li>. C’est comme chaque ligne de ta checklist de chantier.

<ul>
  <li>Casque de sécurité</li>
  <li>Gants de travail</li>
</ul>

3.4<dl>, <dt>, <dd> : Liste de définition

Utile pour créer un lexique ou une légende.

  • <dt> = le terme (comme une pièce du plan)
  • <dd> = sa description (ce qu’elle contient ou à quoi elle sert)
<dl>
  <dt>Salon</dt>
  <dd>La grande pièce à vivre</dd>

  <dt>Cuisine</dt>
  <dd>L’espace pour préparer à manger</dd>
</dl>
Salon
La grande pièce à vivre
Cuisine
L’espace pour préparer à manger

Astuce

Tu peux imbriquer des listes dans des listes ! Par exemple, une liste à puces à l'intérieur d'une étape numérotée.

Verifie tes acquis

3 questions pour valider ce chapitre

1. Quelle balise cree une liste a puces (non ordonnee) ?

<ul> (unordered list) cree une liste a puces. Chaque element est un <li> a l'interieur.