Les listes HTML : <ul>, <ol> et <li>

Les listes HTML permettent d'organiser de l'information de façon claire et facile à lire.

Utiles pour présenter :

• des étapes
• des ingrédients
• des menus de navigation
• des collections d'éléments
• etc.

💡 Pense à une liste d'épicerie ou à un classement de jeux vidéo.

La balise <ul> : liste non ordonnée

La balise <ul> (Unordered List) crée une liste à puces.

Utilise-la lorsque l'ordre des éléments n'a pas d'importance.

• Lorsque le navigateur rencontre une balise <ul> une ligne blanche est automatiquement ajoutée avant et après la liste sur la page.

• La balise de liste est une balise de type block par défaut.

• Parce que c'est un bloc, il faut donc une balise de fermeture </ul>pour indiquer à quel endroit la liste se termine.

• Chaque élément de liste doit être défini avec la balise <li> pour les distinguer les uns des autres.

Exemple

<ul>
    <li>Pizza</li>
    <li>Poutine</li>
    <li>Tacos</li>
</ul>

Résultat

• Pizza
• Poutine
• Tacos

La balise <ol> : liste ordonnée

La balise <ol> (Ordered List) crée une liste numérotée.

Utilise-la lorsque l'ordre des éléments est important.

• Lorsque le navigateur rencontre une balise <ol> une ligne blanche est automatiquement ajoutée avant et après la liste sur la page.

• La balise de liste est une balise de type block par défaut.

• Parce que c'est un bloc, il faut donc une balise de fermeture </ol>pour indiquer à quel endroit la liste se termine.

• Chaque élément de liste doit être défini avec la balise <li> pour les distinguer les uns des autres.

Exemple

<ol>
    <li>Ouvrir VS Code</li>
    <li>Créer un fichier HTML</li>
    <li>Tester la page dans le navigateur</li>
</ol>

Résultat

1. Ouvrir VS Code
2. Créer un fichier HTML
3. Tester la page dans le navigateur

La balise <li> : élément de liste

La balise <li> (List Item) représente un élément individuel dans une liste.

Une balise <li> doit toujours être placée à l'intérieur d'une balise <ul> ou <ol>. Elle ne s'utilise pas ailleurs que dans une liste.

Exemple

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Dans cet exemple, chaque technologie est un item de liste grâce à la balise <li>.

---

Listes imbriquées

Il est possible de placer une liste à l'intérieur d'une autre liste.

La liste imbriquée devient alors un élément de la liste principale.

Exemple

<ul>
    <li>Jeux vidéo
        <ul>
            <li>Minecraft</li>
            <li>Rocket League</li>
        </ul>
    </li>
    <li>Films</li>
</ul>

Résultat

• Jeux vidéo

  • Minecraft
  • Rocket League

• Films

Les listes imbriquées permettent de créer des catégories et des sous-catégories.

---

Résumé

Balise	Rôle
<ul>	Crée une liste à puces
<ol>	Crée une liste numérotée
<li>	Représente un élément dans une liste

Bonnes pratiques

Il est recommandé :

• utiliser les listes pour organiser des informations en points rapides et simples.
• utiliser le CSS pour modifier l'apparence par défaut.

SEO

Au niveau du SEO, les mots utilisés dans une liste ont le même poids que ceux d'un paragraphe.