HTML et CSS

Puces et numéros

Après les éléments à simple balise, comme les liens et les images, voici un exemple d'éléments faisant intervenir des balises imbriquées : les listes, à puces ou numérotées.

Une liste est délimitée par les balises <ol> et </ol> si c'est une liste numérotée (ordered list) ou par <ul> et </ul> si c'est une liste à puces (unordered list).

Chacun des items de la liste est ensuite ajouté entre ces deux balises. Un item de liste est délimité par les balises <li> et </li>

Exemple

<ol>
<li>Entrée</li>
<li>Plat principal</li>
<li>Dessert</li>
</ol>

1. Entrée
2. Plat principal
3. Dessert

Un contenu autre que des items peut être ajouté entre <ol> et </ol> :

<ol>
Menu
<li>Entrée</li>
<li>Plat principal</li>
Plat du jour
<li>Dessert</li>
Bon appétit !
</ol> 

Menu
1. Entrée
2. Plat principal
Plat du jour
3. Dessert
Bon appétit !

<ol> peut prendre les attributs start (pour spécifier le numéro du premier item si on veut qu'il soit différent de 1) et reversed (affichage dans l'ordre décroissant)

<ol start="4" reversed>
<li>Entrée</li>
<li>Plat principal</li>
<li>Dessert</li>
</ol>

4. Entrée
5. Plat principal
6. Dessert

<ol> peut aussi prendre l'attribut type qui permet de choisir le type de numéro : les valeurs possibles sont 1, A, a, I et i. Exemple :

<ol type="a">
<li>Entrée</li>
<li>Plat principal</li>
<li>Dessert</li>
</ol>

1. Entrée
2. Plat principal
3. Dessert

<ul>
<li>Imperméable</li>
<li>Bottes</li>
<li>Parapluie</li>
</ul>

A noter qu'on peut tout à fait faire des listes de listes ...