<ol> : l'élément de liste ordonnée
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'élément HTML <ol>
représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type
.
Exemple interactif
Catégories de contenu |
Contenu de flux,
contenu tangible
si les enfants de l'élément <ol> incluent au moins un
élément <li> .
|
---|---|
Contenu autorisé |
Zéro, un, ou plusieurs éléments
<li> (qui
peuvent imbriquer d'autres éléments
<ol> ou
<ul> ),
<script>
ou
<template> .
|
Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
Parents autorisés | Tout élément acceptant du contenu de flux. |
Rôle ARIA implicite | list |
Rôles ARIA autorisés | directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree. |
Interface DOM | HTMLOListElement |
Attributs
À l'instar des autres éléments HTML, il est possible d'utiliser les attributs universels sur cet élément.
reversed
-
Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas.
start
-
Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le
type
de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisezstart="4"
. type
-
Définit le type de numérotation :
a
pour les lettres minusculesA
pour les lettres majusculesi
pour les chiffres romains minusculesI
pour les chiffres romains majuscules1
pour les chiffres (par défaut)
Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent
type
est utilisé sur un élément<li>
fermé.Note : À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS
list-style-type
.
Note d'utilisation
En général, les éléments d'une liste ordonnée s'affichent avec un marqueur précédant l'élément, tel qu'un chiffre ou une lettre.
Les éléments <ol>
et <ul>
peuvent s'imbriquer aussi profondément que vous le souhaitez, alternant entre <ol>
et <ul>
comme vous le souhaitez.
Les éléments <ol>
et <ul>
représentent tous deux une liste d'éléments. La différence est qu'avec l'élément <ol>
, l'ordre est significatif. Par exemple :
- Étapes d'une recette
- Instructions détaillées
- La liste des ingrédients en proportion décroissante sur les étiquettes d'information nutritionnelle
Pour déterminer la liste à utiliser, essayez de modifier l'ordre des éléments de la liste ; si le sens change, utilisez l'élément <ol>
- sinon, vous pouvez utiliser <ul>
.
Exemples
Exemple simple
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
Résultat
Utilisation des chiffres romains
<ol type="i">
<li>Introduction</li>
<li>Liste des Greffes</li>
<li>Conclusion</li>
</ol>
Résultat
Utilisation de l'attribut start
<p>
Les places d'arrivée des concurrents qui ne sont pas dans le cercle des
gagnants :
</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin' Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
Résultat
Listes imbriquées
<ol>
<li>Premier élément</li>
<li>
Deuxième élément
<!-- La fermeture </li> n'est pas encore placée ! -->
<ol>
<li>Premier élément de la liste imbriquée</li>
<li>Deuxième élément de la liste imbriquée</li>
<li>Troisième élément de la liste imbriquée</li>
</ol>
</li>
<!-- Voici la fermeture </li> ! -->
<li>Troisième élément</li>
</ol>
Résultat
Liste non ordonnée dans une liste ordonnée
<ol>
<li>Premier élément</li>
<li>
Deuxième élément
<!-- La fermeture </li> n'est pas placée ici ! -->
<ul>
<li>Premier élément de la liste non-ordonnée imbriquée</li>
<li>Deuxième élément de la liste non-ordonnée imbriquée</li>
<li>Troisième élément de la liste non-ordonnée imbriquée</li>
</ul>
</li>
<!-- La fermeture </li> est ici. -->
<li>Troisième élément</li>
</ol>
Résultat
Spécifications
Specification |
---|
HTML Standard # the-ol-element |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
Les autres éléments HTML relatifs aux listes :
<ul>
,<li>
,<menu>
-
Les propriétés CSS pouvant servir à la mise en forme de l'élément
<ol>
:list-style
qui permet de choisir comment les nombres ordinaux sont affichés,- Les compteurs CSS, utiles pour gérer les listes imbriquées complexes,
line-height
qui permet d'obtenir le même effet que l'attributcompact
qui est déprécié,margin
qui permet de contrôler l'indentation de la liste.