L'élémentHTML<ol> représente une liste ordonnée, généralement affichée sous forme de liste numérotée.

Exemple interactif

<ol>  <li>Mélangez la farine, la levure chimique, le sucre et le sel.</li>  <li>Dans un autre bol, mélangez les œufs, le lait et l'huile.</li>  <li>Incorporez les deux préparations.</li>  <li>Remplissez les moules à muffins aux 3/4.</li>  <li>Faites cuire pendant 20&nbsp;minutes.</li></ol>

li {  font:    1rem "Fira Sans",    sans-serif;  margin-bottom: 0.5rem;}

Attributs

Cet élément inclut lesattributs universels.

compactObsolèteNon standard

Cet attribut booléen suggère que la liste doit être affichée dans un style compact. L'interprétation de cet attribut dépend du navigateur. Utilisez plutôt leCSS : pour obtenir un effet similaire à l'attributcompact, la propriété CSSline-height peut être utilisée avec une valeur de80%.

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 letype 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 minuscules
• A pour les lettres majuscules
• i pour les chiffres romains minuscules
• I pour les chiffres romains majuscules
• 1 pour les chiffres (par défaut)

Le type défini est utilisé pour l'ensemble de la liste, sauf si un attribut différenttype 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é CSSlist-style-type.

Note d'utilisation

En général, les éléments d'une liste ordonnée s'affichent avec unmarqueur précédant l'élément, tel qu'un chiffre ou une lettre.

Les éléments<ol> et<ul> (ou le synonyme<menu>) peuvent s'imbriquer aussi profondément que vous le souhaitez, alternant entre<ol> et<ul> (ou<menu>) 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&nbsp;:</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

Résumé technique

Spécifications

Compatibilité des navigateurs

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 permet de choisir la façon dont les nombres ordinaux sont affichés,
  • Les compteurs CSS sont utiles pour gérer les listes imbriquées complexes,
  • line-height permet d'obtenir le même effet que l'attributcompact qui est déprécié,
  • margin permet de contrôler l'indentation de la liste.