MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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.

Catégories de contenu Contenu de flux, et du 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>).
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ôles ARIA autorisés directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
Interface DOM HTMLOListElement

Attributs

Cet élément dispose des attributs universels.

reversed HTML5
Cet attribut booléen précise que les objets listés par l'élément sont affichés avec un ordre inversé (l'objet le moins important apparaît en première position).
start HTML5
La valeur de cet attribut, un nombre entier, définit l'indice à partir duquel les objets de la liste sont numérotés. Bien que les indices des éléments puissent être des nombres romains ou des lettres la valeur de cet attribut doit être un nombre. Ainsi pour commencer la numérotation des éléments avec la lettre « C », il faudra entrer : <ol start="3">.
Note : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.

Attributs dépréciés et obsolètes

compact
Cet attribut booléen indique si la liste doit être affichée avec un style compact. L'interprétation de cet attribut dépend de l'agent utilisateur utilisé et ne fonctionne pas avec tous les navigateurs.
Note :  Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément <ol>. Afin d'obtenir un effet similaire à cet attribut, la propriété CSS line-height peut être utilisée avec une valeur de 80%.
type
Cet attribut définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants :
  • a : lettres minuscules
  • A : lettres majuscules
  • i : nombres romains en minuscules
  • I : nombres romains en majuscules
  • 1 : nombres
Le type sélectionné est alors utilisé pour toute la liste à moins qu'un élément <li> de la liste utilise une autre valeur pour l'attribut type.
Note : Cet attribut a été déprécié. La propriété CSS list-style-type doit être utilisé à la place de cet attribut.

Note d'utilisation

  • Les éléments <ol> et  <ul> représentent tous les deux une liste d'objets. Leur différence réside dans le fait qu'avec <ol> l'ordre est important. Un moyen mnémotechnique pour savoir lequel de ces deux éléments utiliser est d'essayer de changer l'ordre dans la liste : si sa signification a changé alors <ol> doit être utilisé, sinon <ul> doit être utilisé.
  • Il n'y pas de limitation concernant la profondeur ou l'éventuelle imbrication des listes définies par les éléments <ol> et <ul>.

Exemples

Exemple simple

HTML

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

Résultat

Exemple avec start

HTML

<ol start="7">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

Résultat

Utiliser les chiffres romains

HTML

<ol type="i">
  <li>toto</li>
  <li>truc</li>
  <li>bidule</li>
</ol>

Résultat

Listes imbriquées

HTML

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément  <!-- La balise </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 balise </li> ! -->
  <li>Troisième élément</li>
</ol>

Résultat

Listes imbriquées avec <ol> et <ul>

HTML

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément  <!-- La balise </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 balise </li> est ici. -->
  <li>Troisième élément</li>
</ol>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<ol>' dans cette spécification.
Standard évolutif Aucune modification depuis la dernière dérivation W3C HTML5.
HTML5
La définition de 'HTMLOListElement' dans cette spécification.
Recommendation Ajout des attributs reversed et start. L'attribut type n'est plus déprécié.
HTML 4.01 Specification
La définition de '<ol>' dans cette spécification.
Recommendation Dépréciation des attributs compact et type.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple (Oui) (Oui)1 (Oui) (Oui) (Oui)
compact (Oui) (Oui)1 (Oui) (Oui) (Oui)
reversed18 ?18 Non (Oui)5.2
start (Oui) (Oui)1 (Oui) (Oui) (Oui)
type (Oui) (Oui)1 (Oui) (Oui) (Oui)
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
compact (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
reversed (Oui) (Oui) ?18 Non (Oui) (Oui)
start (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
type (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)

Voir aussi

  • Les autres éléments HTML relatifs aux listes :
  • 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'attribut compact qui est déprécié,
    • margin qui permet de contrôler l'indentation de la liste.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, wakka27, tregagnon
 Dernière mise à jour par : SphinxKnight,