Dans ce cours, nous allons voir comment insérer des listes dans vos pages web. Une liste est par exemple ceci :


Comme vous le voyez, il existe deux types de listes. Les listes ordonnées et les listes non ordonnées. Le premier type de liste vous affichera les élément avec des nombres devant tandis que le deuxième type de liste vous affichera des puces. Vous allez voir qu'il est possible de personnaliser l'apparence des puces en questions.

Les listes ordonées

Ce type de liste est introduit par la balise ol. Cette balise sert à contenir tous les éléments de la liste qui seront eux introduit par la balise li. Voyez par exemple ce code :

<ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ol>

Si vous affichez une page contenant ces balises, vous obtiendrez :


La balise ol provient de Ordered List (liste ordonnée). Elle sert à délimiter le début et la fin de la liste. La balise li, quant à elle, permet d'introduire un nouvel élément dans la liste. Vous pouvez également imbriquer les balises ol l'une dans l'autre, il est donc possible de faire ceci :

<ol> <li>Element 1</li> <li>Element 2</li> <ol> <li>Element 2.1</li> <li>Element 2.2</li> </ol> <li>Element 3</li> </ol>

Pour que cela donne ceci :


Il est possible de personnaliser l'apparence des listes, mais tout cela se fait en CSS, nous verrons donc cela dans la partie correspondante.

Les listes non ordonées

Les listes non ordonnées ne sont pas identifiées grâce à des numéros, mais plutôt grace à des puces. La puce par défaut est un petit rond plein, mais il est possible de changer cela en CSS, nous vererons cela dans la partie correspondante. La construction d'une liste non ordonnée suit le même principe qu'une liste ordonnée. La seule différence est que les balises li ne doivent plus être entourées de balises ol mais ul. Ainsi, le code suivant :

<il> <li>Element 1</li> <li>Element 2</li> <ul> <li>Element 2.1</li> <li>Element 2.2</li> </ul> <li>Element 3</li> </ul>

Donnerait le résultat suivant :


Comme vous le voyez, les styles de puce changent automatiquement selon l'imbrication des listes. Vous pouvez bien évidemment modifier cela via le CSS. Il est également possible d'imbriquer des listes non ordonnée dans des listes ordonnées et vice versa. Ainsi, le code suivant est possible :

<il> <li>Element 1</li> <li>Element 2</li> <ol> <li>Element 2.1</li> <li>Element 2.2</li> </ol> <li>Element 3</li> </ul>

Et ce code afficherait :


Cela ne pose absolument aucun problème.