Définition
L’élément HTML ol représente une liste ordonnée d’éléments. On utilise un élément de liste ordonnée lorsqu’on veut mettre en avant un certain ordre hiérarchique et / ou logique entre les éléments de la liste.
Les éléments d’une liste ordonnée sont définis par des éléments HTML li. Chaque nouvel élément de liste doit être déclaré avec un élément li.
Dans le cas d’une liste ordonnée, les éléments de liste possèdent des marqueurs qui vont refléter l’ordre des éléments de liste à l’aide d’entiers incrémentés (1, 2, 3…) par défaut.
On va pouvoir changer l’apparence des marqueurs en CSS grâce à la propriété list-style-type qui va nous permettre de choisir le marqueur de notre choix (chiffres romains, lettres de l’alphabet minuscules ou majuscules, etc.).
Attributs
L’élément ol possède deux attributs particuliers : les attributs start et reversed.
L’attribut start permet de définir l’indice de départ pour les éléments de liste ordonnée. Les marqueurs des éléments de liste démarreront à partir de la valeur passée à l’attribut start.
L’attribut reversed permet d’inverser la numérotation des marqueurs des éléments de liste. Avec cet attribut, le premier élément déclaré dans la liste héritera de la valeur qu’aurait eu le marqueur du dernier élément de liste sans l’attribut et etc. De manière sémantique, cela permet d’indiquer que le premier élément est le moins important dans la hiérarchie / le dernier dans l’ordre logique.
Exemples d’utilisation
Dans l’exemple suivant, on définit deux listes ordonnées en HTML. On modifie l’apparence des puces de la deuxième liste grâce à la propriété CSS list-style-type. Quelques valeurs courantes de la propriétés sont disc, circle, square, decimal, lower-latin, lower-roman, lower-greek…
See the Pen
Balise HTML ol by Pierre (@pierregiraud)
on CodePen.
Compatibilité navigateurs
Ces informations sont tirées du site caniuse.com. Les cases vertes indiquent que le navigateur supporte l’élément. Les cases grises indiquent que le support est inconnu. Les cases rouges indiquent que l’élément n’est pas supporté. Le chiffre dans chaque case correspond à la version du navigateur concernée.
Extraits de la documentation officielle
Ces informations sont extraites de la spécification officielle (W3C)
