6. Listes ou Bullet points¶

Vous êtes adepte de PowerPoint ou World ? Vous avez donc l'habitude des bullet points. Nous allons voir ici comment les gérer en HTML.

Les listes¶

Les listes nous permettent au cours de notre rédaction de mieux structurer nos différents blocs de texte et d'ordonner des informations. Le HTML permet de reproduire des listes ordonnées ou non. En HTML, on parle de :

• Listes à puces : <ul>
• Listes numérotées : <ol>

Les éléments d'une liste sont délimités par la balise normale <li>.

Les listes non-ordonnées¶

Nous allons maintenant passer aux listes non-ordonnées ou liste à puces. Contrairement à la précédente, celle-ci liste des éléments dont l'ordre n'importe pas, comme par exemple les ingrédients d'une recette de cuisine.

Cette liste commence par la balise <ul> :

<ul>
</ul>

Ensuite, chaque élément doit être compris dans une balise <li> :

<ul>
    <li>
        un oeuf,
    </li>
    <li>
        une casserolle,
    </li>
    <li>
        de l'eau,
    </li>
    <li>
        une cuillère.
    </li>
</ul>

Voilà le résultat :

• un oeuf,
• une casserolle,
• de l'eau,
• une cuillère.

Les listes ordonnées¶

La première liste est la liste ordonnée. Il s'agit d'une liste dont l'ordre des éléments importe, comme par exemple durant la préparation d'une recette de cuisine.

Cette liste commence par la balise <ol> :

<ol>
</ol>

Ensuite, chaque élément doit être compris dans une balise <li> :

<ol>
    <li>
        Faire bouillir de l'eau.
    </li>
    <li>
        Plonger l'oeuf dans l'eau en ébulition avec la cuillère.
    </li>
    <li>
        Attendre 3 minutes.
    </li>
    <li>
        Retirer l'oeuf.
    </li>
</ol>

Voilà le résultat (notez les numéros 1, 2, 3 … qui se placent avant chaque éléments de la liste) :

1. Faire bouillir de l'eau.
2. Plonger l'oeuf dans l'eau en ébullition avec la cuillère.
3. Attendre 3 minutes.
4. Retirer l'oeuf.