Balise HTML <ol>
La balise HTML <ol> sert à créer une liste ordonnée, qui contient des éléments dans un certain ordre.
Chaque élément de la liste ordonnée commence par la balise ouvrante <li> et se termine par la balise fermante </li>. En plus du texte, la balise <li> peut inclure d'autres éléments HTML (listes, images, titres, paragraphes, etc.).
En général, les éléments d'une liste ordonnée sont précédés d'un marqueur, comme une lettre ou un chiffre.
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 majuscules (I, II, III, ...) ; chiffres romains minuscules (i, ii, iii, ...). L'attribut type est utilisé pour indiquer le type de liste numérotée.
Si vous ne spécifiez aucun attribut supplémentaire, le contenu de la balise <ol> est par défaut numéroté avec des chiffres arabes, en commençant par un.
Les balises <ol> et <ul> représentent toutes deux une liste d'éléments. Cependant, il existe une différence avec la balise <ol> où l'ordre a de l'importance.
Normalement, les balises <ol> et <ul> peuvent s'imbriquer aussi profondément que nécessaire, en alternant entre elles selon vos souhaits.
TIP
Si les propriétés CSS sont appliquées à la balise <ol>, alors les éléments imbriqués dans la balise <li> les héritent.
Syntaxe
La balise <ol> s'utilise par paire. Le contenu est écrit entre la balise ouvrante (<ol>) et la balise fermante (</ol>).
Exemple de la balise HTML <ol> :
Exemple de liste ordonnée avec la balise HTML <ol>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Dans l'exemple ci-dessus, nous avons utilisé l'attribut start avec la valeur "50".
Pour déterminer le type d'éléments de numérotation au lieu d'utiliser l'attribut type, utilisez la propriété CSS list-style-type.
Exemple de la balise HTML <ol> utilisée avec la propriété CSS list-style-type :
Exemple de la balise HTML <ol> avec une propriété list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol style="list-style-type: upper-roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</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
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| compact | compact | Réduit les indentations et l'espacement entre les lignes. Non pris en charge dans HTML5. Nous recommandons plutôt 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 croissant habituel). |
| start | number | Définit le nombre à partir duquel la liste ordonnée commence. La valeur doit être un entier, les valeurs négatives peuvent être utilisées. Lorsqu'il est utilisé avec des lettres (type = "A" et type = "a"), le nombre indiqué dans la valeur de l'attribut correspond au numéro ordinal de la lettre dans l'alphabet. Par exemple, start = "5" correspondra à la lettre "E" et la liste commencera par celle-ci. Si start = "27" est spécifié, la liste devient à deux chiffres ("27" = "AA", "28" = "AB", "29" = "AC" ...). |
| type | 1 A a I i | Définit le type de marqueur de liste. |
La balise <ol> prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <ol>
{
"tag_name": "ol"
}Pratique
Quelles sont les fonctionnalités et les utilisations de la balise HTML <ol> ?