Les listes

Chapitre 5 • Listes en HTML

Les listes sont des outils fondamentaux en HTML pour structurer et organiser l'information de manière claire et hiérarchique.

Les avantages clés :

Clarté visuelle : Les listes rendent le contenu plus scannable et facile à lire
Organisation logique : Elles montrent la relation entre les éléments
Accessibilité : Les lecteurs d'écran peuvent naviguer plus facilement dans les listes
SEO : Les moteurs de recherche comprennent mieux le contenu structuré en listes
Flexibilité : Elles s'adaptent à de nombreux contextes (menus, procédures, inventaires...)

Exemple sans liste

Pour faire un gâteau, il faut d'abord préchauffer le four. Ensuite, mélanger les ingrédients secs. Puis ajouter les œufs et le lait. Enfin, verser dans un moule et enfourner.

Exemple avec liste

Préchauffer le four à 180°C
Mélanger les ingrédients secs
Ajouter les œufs et le lait
Verser dans un moule et enfourner

Quand utiliser une liste ?

Utilisez une liste lorsque vous avez :

Une série d'éléments reliés entre eux
Des étapes à suivre dans un ordre précis
Des éléments qui partagent une caractéristique commune
Besoin d'une hiérarchie visuelle claire

Les listes non ordonnées <ul>

Chapitre 5 • Listes en HTML

La balise <ul> (Unordered List) crée une liste à puces, sans ordre particulier entre les éléments.

<ul>
    <li>Pommes</li>
    <li>Poires</li>
    <li>Bananes</li>
</ul>

Cas d'utilisation typiques :

Listes de courses ou d'ingrédients
Fonctionnalités d'un produit
Éléments sans ordre d'importance
Menus de navigation (avec CSS supplémentaire)
Listes de points clés ou caractéristiques

Style des puces

Avec CSS, vous pouvez personnaliser l'apparence des puces :

Puces rondes

ul {
    list-style-type: disc; /* Par défaut */
}

Puces carrées

ul {
    list-style-type: square;
}

Puces personnalisées

ul {
    list-style-type: "→ ";
}

À éviter

Utiliser <ul> pour du contenu qui suit un ordre logique
Oublier de fermer les balises <li>
Mettre directement du texte dans <ul> sans <li>

Les listes ordonnées <ol>

Chapitre 5 • Listes en HTML

La balise <ol> (Ordered List) crée une liste numérotée où l'ordre des éléments a de l'importance.

<ol>
    <li>Étape 1 : Allumer le four</li>
    <li>Étape 2 : Préparer la pâte</li>
    <li>Étape 3 : Enfourner</li>
</ol>

Attributs utiles pour <ol> :

type : Type de numérotation (1, A, a, I, i)
start : Valeur de départ de la numérotation
reversed : Numérotation inversée

Exemples de numérotation

Chiffres (défaut)

<ol type="1">
    <li>Premier</li>
    <li>Deuxième</li>
</ol>

Lettres majuscules

<ol type="A">
    <li>Premier</li>
    <li>Deuxième</li>
</ol>

Chiffres romains

<ol type="I">
    <li>Premier</li>
    <li>Deuxième</li>
</ol>

Quand utiliser <ol> ?

Procédures étape par étape
Instructions nécessitant un ordre précis
Classements ou top listes
Recettes de cuisine
Tutoriels ou guides

Les éléments de liste <li>

Chapitre 5 • Listes en HTML

La balise <li> (List Item) définit chaque élément d'une liste, qu'elle soit ordonnée (<ol>) ou non (<ul>).

Syntaxe de base

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

Contenu riche

<li>
    <h3>Titre</h3>
    <p>Description détaillée</p>
    <img src="image.jpg" alt="">
</li>

Ce que peut contenir un <li> :

Texte simple
Autres balises HTML (paragraphes, images, liens...)
D'autres listes (pour l'imbrication)
Contenu multimédia
Éléments interactifs (boutons, formulaires...)

Bonnes pratiques

Toujours fermer la balise </li>
Éviter les listes trop longues (diviser si nécessaire)
Garder les éléments cohérents dans une même liste
Utiliser des listes descriptives (<dl>) pour les paires terme/définition

Valeur d'attribut

Dans les <ol>, vous pouvez modifier la valeur numérique d'un élément :

<ol>
    <li value="5">Cinquième élément</li>
    <li>Sixième élément (automatique)</li>
</ol>

Listes imbriquées

Chapitre 5 • Listes en HTML

Les listes peuvent être imbriquées pour créer des hiérarchies complexes et des structures arborescentes.

<ul>
    <li>Fruits
        <ul>
            <li>Pommes</li>
            <li>Bananes</li>
        </ul>
    </li>
    <li>Légumes
        <ul>
            <li>Carottes</li>
            <li>Brocolis</li>
        </ul>
    </li>
</ul>

Résultat d'une liste imbriquée

Fruits
- Pommes
- Bananes
Légumes
- Carottes
- Brocolis

Techniques d'imbrication

Mélangez <ul> et <ol> selon le besoin
Utilisez des styles CSS différents pour chaque niveau
Limitez la profondeur à 3-4 niveaux maximum pour la lisibilité
Alignez correctement votre code pour une meilleure maintenance

Exemple complexe

<ol>
    <li>Préparation
        <ul>
            <li>Acheter les ingrédients</li>
            <li>Préparer les ustensiles</li>
        </ul>
    </li>
    <li>Cuisson
        <ol>
            <li>Préchauffer le four</li>
            <li>Mélanger les ingrédients</li>
        </ol>
    </li>
</ol>

Exemples pratiques

Chapitre 5 • Listes en HTML

Voici des cas concrets d'utilisation des listes en HTML.

Menu de navigation

<nav>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Produits</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Liste de fonctionnalités

<h2>Notre offre inclut :</h2>
<ul>
    <li>Hébergement sécurisé</li>
    <li>Sauvegardes quotidiennes</li>
    <li>Support 24/7</li>
</ul>

Recette de cuisine

<h2>Préparation :</h2>
<ol>
    <li>Mélanger farine et levure</li>
    <li>Ajouter les œufs un à un</li>
    <li>Cuire 45 minutes à 180°C</li>
</ol>

FAQ

<h2>Questions fréquentes :</h2>
<ul>
    <li>
        <h3>Quels sont vos horaires ?</h3>
        <p>Nous sommes ouverts de 9h à 18h.</p>
    </li>
    <li>
        <h3>Acceptez-vous les cartes ?</h3>
        <p>Oui, toutes les cartes bancaires.</p>
    </li>
</ul>

Astuces avancées

Utilisez CSS pour créer des menus déroulants
Combine listes et flexbox/grid pour des layouts complexes
Ajoutez des icônes avec Font Awesome pour enrichir visuellement
Utilisez des listes pour les galeries d'images

Erreurs fréquentes

Chapitre 5 • Listes en HTML

Balises non fermées

<ul>
    <li>Premier élément
    <li>Deuxième élément
</ul>

Problème : Oublier de fermer les balises <li>

Mauvais type de liste

<ul>
    <li>Étape 1</li>
    <li>Étape 2</li>
</ul>

Problème : Utiliser <ul> pour des étapes qui devraient être numérotées

Imbrication incorrecte

<ul>
    <li>Élément 1</li>
    <ul>
        <li>Sous-élément</li>
    </ul>
</ul>

Problème : Le <ul> imbriqué devrait être dans un <li>

Solutions et bonnes pratiques

Validation : Toujours vérifier votre HTML avec le validateur W3C
Indentation : Bien indenter le code pour repérer les erreurs d'imbrication
Sémantique : Choisir le bon type de liste en fonction du contenu
Accessibilité : Utiliser les listes pour structurer, pas seulement pour la mise en forme

Cas particuliers

Pour les listes de définitions (terme + description), utilisez plutôt :

<dl>
    <dt>HTML</dt>
    <dd>Langage de balisage pour le web</dd>
    <dt>CSS</dt>
    <dd>Langage de mise en forme</dd>
</dl>

En résumé

Chapitre 5 • Listes en HTML

Listes non ordonnées

Balise <ul> pour les éléments sans ordre particulier

Listes ordonnées

Balise <ol> pour les séquences numérotées

Éléments de liste

Chaque item est encadré par <li></li>

Imbrication

Listes dans des listes pour des hiérarchies complexes

Les listes en HTML sont des outils puissants pour organiser et présenter l'information de manière structurée. Que ce soit pour des menus de navigation, des procédures étape par étape ou simplement pour présenter une série d'éléments connexes, maîtriser les balises <ul>, <ol> et <li> est essentiel pour tout développeur web. Dans le prochain chapitre, nous aborderons les tableaux et leur mise en forme en HTML.