← 返回首页
Élément HTML <ol> : l'élément de liste ordonnée - HTML | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
Basculer la barre latérale
  1. Web
  2. HTML
  3. Référence
  4. Éléments
  5. <ol>
Thème
  • Automatique
  • Clair
  • Sombre
Français
Se souvenir de la langue En savoir plus

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Élément HTML <ol> : l'élément de liste ordonnée

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

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

Dans cet article

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 les attributs universels.

compact

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 le CSS : pour obtenir un effet similaire à l'attribut compact, la propriété CSS line-height peut être utilisée avec une valeur de 80%.

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", utilisez start="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é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> (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

html
<ol> <li>Fee</li> <li>Fi</li> <li>Fo</li> <li>Fum</li> </ol>

Résultat

Utilisation des chiffres romains

html
<ol type="i"> <li>Introduction</li> <li>Liste des Greffes</li> <li>Conclusion</li> </ol>

Résultat

Utilisation de l'attribut start

html
<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

html
<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

html
<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

Catégories de contenu Contenu autorisé Omission de balises Parents autorisés Rôle ARIA implicite Rôles ARIA autorisés Interface DOM
Contenu de flux, contenu tangible si les enfants de l'élément <ol> incluent au moins un élément <li>.
Zéro ou plusieurs éléments <li>, <script> et <template>.
Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Tout élément acceptant du contenu de flux.
list
directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
HTMLOListElement

Spécifications

Spécification
HTML
# the-ol-element

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de 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'attribut compact qui est déprécié,
    • margin permet de contrôler l'indentation de la liste.

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?
Oui Non
Apprendre à contribuer

Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu
  1. HTML
  2. Guides
    1. Fiche de synthèse
    2. Commentaires
    3. Validation des contraintes
    4. Catégories de contenu
    5. Formats de date et d'heure
    6. Microdonnées
    7. Microformats
    8. Modes quirks et standards
    9. Images adaptatives
  3. Comment faire
  4. Définir des termes avec HTML
  5. Utiliser les attributs de données
  6. Utiliser des images inter-origines
  7. Ajouter une carte cliquable sur une image
  8. Rédiger des pages HTML à affichage rapide
  9. Ajouter JavaScript dans votre page web
  10. Références
  11. Éléments
    1. <a>
    2. <abbr>
    3. <acronym>
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big>
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center>
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir>
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe>
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font>
    43. <footer>
    44. <form>
    45. <frame>
    46. <frameset>
    47. <geolocation>
    48. <h1>-<h6>
    49. <head>
    50. <header>
    51. <hgroup>
    52. <hr>
    53. <html>
    54. <i>
    55. <iframe>
    56. <img>
    57. <input>
    58. <ins>
    59. <kbd>
    60. <label>
    61. <legend>
    62. <li>
    63. <link>
    64. <main>
    65. <map>
    66. <mark>
    67. <marquee>
    68. <menu>
    69. <meta>
    70. <meter>
    71. <nav>
    72. <nobr>
    73. <noembed>
    74. <noframes>
    75. <noscript>
    76. <object>
    77. <ol>
    78. <optgroup>
    79. <option>
    80. <output>
    81. <p>
    82. <param>
    83. <picture>
    84. <plaintext>
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb>
    89. <rp>
    90. <rt>
    91. <rtc>
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <selectedcontent>
    100. <slot>
    101. <small>
    102. <source>
    103. <span>
    104. <strike>
    105. <strong>
    106. <style>
    107. <sub>
    108. <summary>
    109. <sup>
    110. <table>
    111. <tbody>
    112. <td>
    113. <template>
    114. <textarea>
    115. <tfoot>
    116. <th>
    117. <thead>
    118. <time>
    119. <title>
    120. <tr>
    121. <track>
    122. <tt>
    123. <u>
    124. <ul>
    125. <var>
    126. <video>
    127. <wbr>
    128. <xmp>
  12. Attributs
    1. accept
    2. autocomplete
    3. capture
    4. content
    5. crossorigin
    6. dirname
    7. disabled
    8. elementtiming
    9. fetchpriority
    10. for
    11. form
    12. integrity
    13. max
    14. maxlength
    15. min
    16. minlength
    17. multiple
    18. pattern
    19. placeholder
    20. readonly
    21. rel
    22. required
    23. size
    24. step
  13. Attributs universels
    1. accesskey
    2. anchor
    3. autocapitalize
    4. autocorrect
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. spellcheck
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy
    34. writingsuggestions
  14. Attributes by element
    1. Types <input>
      1. <input type="button">
      2. <input type="checkbox">
      3. <input type="color">
      4. <input type="date">
      5. <input type="datetime-local">
      6. <input type="email">
      7. <input type="file">
      8. <input type="hidden">
      9. <input type="image">
      10. <input type="month">
      11. Valeur d'attribut HTML `<input type="number">`
      12. <input type="password">
      13. <input type="radio">
      14. <input type="range">
      15. <input type="reset">
      16. <input type="search">
      17. <input type="submit">
      18. <input type="tel">
      19. <input type="text">
      20. <input type="time">
      21. <input type="url">
      22. <input type="week">
    2. <script type>
      1. importmap
      2. speculationrules
    3. <meta name>
      1. color-scheme
      2. referrer
      3. robots
      4. text-scale
      5. theme-color
      6. viewport
    4. <meta http-equiv>
  15. Attribute values
    1. <link rel> keywords
      1. alternate stylesheet
      2. compression-dictionary
      3. dns-prefetch
      4. manifest
      5. me
      6. modulepreload
      7. noopener
      8. noreferrer
      9. preconnect
      10. prefetch
      11. preload
      12. prerender

Votre modèle pour un internet meilleur.

MDN Contribuer Développeur·euse·s

Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.