w3docs logo

Tag HTML <ol>

HTML tag <ol> est utilisé pour créer une liste numérotée (ordonnée), qui contient les éléments dans une certaine séquence.

Chaque élément de la liste numérotée commence par l'étiquette du tag ouvrant, <li> et se termine par le tag fermant </li>. Le tag <li> peut inclure d'autres éléments HTML (listes, images, en-têtes, paragraphes, etc.) en plus du texte.

Les valeurs suivantes peuvent être utilisées comme éléments de numérotation: chiffres arabes (1, 2, 3, ...); lettres latines majuscules (A, B, C, ...); lettres latines minuscules (a, b, c, ...); chiffres romains supérieurs (I, II, III, ...); chiffres romains inférieurs (i, ii, iii, ...).Pour indiquer le type de la liste numérotée on utilise l’attribut type.

Si vous ne spécifiez aucun attribut supplémentaire, le contenu du tag <ol> est par défaut numéroté par les chiffres arabes, en commençant par un.

Si vous appliquez des propriétés CSS au tag HTML <ol> les éléments imbriqués dans le tag </li> les héritent.

Syntaxe

Le tag <li> est apparié; le tag fermant est requis.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <ol>
      <li>Snacks</li>
      <li>Chauds</li>
      <li>Salades</li>
    </ol>
    <ol start="50">
      <li>Boissons gazeuses</li>
      <li>Boisson chaudes</li>
      <li>Glacier</li>
    </ol>
    <ol type="A">
      <li>Coca-Cola</li>
      <li>Ice Tea</li>
      <li>Fanta</li>
    </ol>
  </body>
</html>

Dans cet exemple, nous avpns utilisé l'attribut start avec la valeur "50".

Résultat

Menu

Propriétés CSS

Pour définir le type des éléments de numérotation, vous pouvez utiliser la propriété CSS list-style-type au lieu de l’attibut type.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemples des listes ordonnées</h2>
    <ol style="list-style-type: upper-roman">
      <li>Boissons gazeuses</li>
      <li>Boissons chaudes</li>
      <li>Glacier</li>
    </ol>
    <ol style="list-style-type: hebrew">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ol>
    <ol style="list-style-type: decimal">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ol>
  </body>
</html>

Résultat

Menu

Attributs

Attribut Valeur Description
compact compact Réduit l'espacement et la distance entre les lignes.
Non supporté en HTML5. Au lieu de cela nous vous recommandons d’utiliser la propriété CSS line-height.
reversed reversed Indique que les éléments de la liste doivent être dans l'ordre décroissant (au lieu de l'ordre habituel dans l'ordre croissant).
start number Définit le numéro à partir duquel la liste numérotée va commencer. La valeur doit être un entier, des valeurs négatives peuvent être utilisées. Lorsqu'il est utilisé avec des lettres (type = "A" et type = "a"), le nombre spécifié dans la valeur d'attribut correspond au nombre ordinal de la lettre dans l'alphabet. Par exemple, start = "5" correspondra à la lettre "E" et la liste commencera par elle. Si la valeur est définie sur start = "27", la liste devient à deux chiffres ("27" = "AA", "28" = "AB", "29" = "AC" ...).
type 1
A
a
I
i		 Spécifie le type du marqueur de liste.

Le tag <ol> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <ol> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <ol>:

Coloration du texte dans le tag HTML <ol>:

Styles de mise en page du texte pour la tag HTML <ol>:

Autres propriétés utiles pour le tag HTML <ol>:

Support de Navigateurs

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Pratiquez vos connaissances

Quel est le but principal de la balise <ol> et quels types de listes elle peut créer dans HTML ?
Trouvez-vous cela utile?