### ol : liste ordonnée

La différence entre une liste non ordonnée et une liste ordonnée tient dans la façon dont le navigateur va faire l'affichage des lignes de la liste : dans une liste ordonnée, les lignes seront automatiquement précédée d'un numéro.

Une liste ordonnée se fait avec 2 élements HTML :

- l'élément ol marque les limites de la liste,
- l'élément li définit une ligne à l'intérieur de la liste.

L'imbrication des li à l'intérieur d'un élément ol est obligatoire.

liste ordonnée
Exemple : liste ordonnée
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste ordonnée</title> </head> <body> <p>Pour mon anniversaire, je veux :</p> <ol> <li>un X-Wing rouge</li> <li>un sabre-laser</li> <li>un chapeau de Gandalf</li> <li>de l'herbe à pipe de la Comté.</li> </ol> </body> </html>

Par défaut le navigateur représente les listes ordonnées de la façon suivante :

- il y a une marge avant et une marge après le contenu de la liste. Cette marge est égale à la hauteur d'une ligne de texte.
- les lignes de la liste sont mises en retrait par une marge à l'intérieur gauche de la liste,
- les lignes sont précédées d'un compteur automatique,
- les lignes sont affichées les unes en dessous des autres, sans marge pour les séparer.

Comme d'habitude des règles de style CSS peuvent modifier cet affichage par défaut. Voir dans le tutoriel CSS la partie consacrée aux listes.

L'attribut `type` permet de définir comment sera fait le compteur et l'attribut `start` sa valeur de départ.
La valeur de `type`

- `1` indique un compteur décimal (1, 2, 3, 4, ...) - valeur par défaut
- `a` indique un compteur alphabétique en minuscules (a, b, c, d, ...)
- `A` indique un compteur alphabétique en majuscules (A, B, C, D, ...)
- `i` indique un compteur en nombres romains en minuscules (i, ii, iii, iv, ...)
- `I` indique un compteur en nombres romains en majuscules (I, II, III, IV, ...)

Exemple : compteur en chiffres romains
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Compteur en chiffres romains</title> </head> <body> <p>Pour mon anniversaire, je veux :</p> <ol type="I"> <li>un X-Wing rouge</li> <li>un sabre-laser</li> <li>un chapeau de Gandalf</li> <li>de l'herbe à pipe de la Comté.</li> </ol> </body> </html>

### Liste du contenu du tutoriel CSS

Réalisez la liste ordonnée permettant d'obtenir la page ci-dessous.

liste du contenu du tutoriel CSS

Code à compléter

Exercice : liste du contenu du tutoriel CSS
<!DOCTYPE html> <html lang="fr"> </html>

Une solution possible

Exercice : liste du contenu du tutoriel CSS
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste contenu tutoriel CSS</title> </head> <body> <p>Tutoriel CSS</p> <ol type="A"> <li>Principes généraux</li> <li>Sélectionner des éléments</li> <li>Positionner des éléments</li> <li>Boîtes et dimensions</li> <li>Couleur et arrière-plan</li> <li>Polices et textes</li> <li>Mise en page</li> </ol> </body> </html>