Balise HTML <ol>
La balise HTML <ol> crée une liste ordonnée. Découvrez ses attributs (type, start, reversed) et la propriété CSS list-style-type avec des exemples.
La balise HTML <ol> est utilisée pour 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, tel qu'une lettre ou un nombre.
L'attribut type sélectionne le type de marqueur utilisé. Les valeurs possibles sont :
type="1"— chiffres arabes (1, 2, 3, ...). C'est la valeur par défaut.type="A"— lettres latines majuscules (A, B, C, ...).type="a"— lettres latines minuscules (a, b, c, ...).type="I"— chiffres romains majuscules (I, II, III, ...).type="i"— chiffres romains minuscules (i, ii, iii, ...).
Si vous ne spécifiez pas l'attribut type, le contenu de la balise <ol> est numéroté avec des chiffres arabes, en commençant par un.
L'attribut type est présentatif — il contrôle l'apparence de la liste, pas sa signification. L'approche moderne recommandée consiste à choisir le marqueur en CSS avec la propriété list-style-type, en gardant le style hors du balisage. Les équivalents CSS sont : type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Les balises <ol> et <ul> représentent toutes deux une liste d'éléments. Cependant, la différence avec la balise <ol> est que l'ordre y est significatif.
Normalement, les balises <ol> et <ul> peuvent s'imbriquer aussi profondément que nécessaire, en alternant entre elles comme vous le souhaitez.
Si les propriétés CSS sont appliquées à la balise <ol>, les éléments imbriqués dans la balise <li> les héritent.
Syntaxe
La balise <ol> fonctionne par paires. 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 donné, nous avons utilisé l'attribut start avec la valeur « 50 ».
Plutôt que de définir le marqueur dans le balisage avec l'attribut type, définissez-le en CSS avec la propriété list-style-type. Cela maintient la présentation dans votre feuille de style et vous permet de réutiliser la règle sur de nombreuses listes. Dans l'exemple ci-dessous, le marqueur est défini dans un bloc <style> au lieu d'un attribut style= en ligne :
Exemple de la balise HTML <ol> utilisée avec la propriété CSS list-style-type :
Exemple de la balise HTML <ol> avec la propriété list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>L'attribut reversed
L'ajout de l'attribut boolean reversed numérote la liste en ordre décroissant. Il est pratique pour les comptes à rebours « top 5 » ou toute liste où le dernier élément doit porter le numéro le plus bas. Vous pouvez le combiner avec start pour contrôler le nombre le plus élevé.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Les marqueurs ci-dessus comptent à rebours 3, 2, 1.
Imbrication des listes ordonnées
Un élément de liste peut contenir une autre balise <ol>, vous permettant de créer des plans et des sous-étapes. Chaque liste imbriquée redémarre sa propre numérotation. Placez la balise <ol> imbriquée à l'intérieur de la balise <li> parente (et non entre les éléments de liste) pour que la structure reste valide.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| compact | compact | Indiquait que la liste devait être rendue de manière plus compacte, avec moins d'espacement entre les éléments. Déprécié et non pris en charge en HTML5. Pour réduire l'espacement, utilisez plutôt les propriétés CSS margin et padding sur les éléments <li> (ou <ol>). |
| reversed | reversed | Indique que les éléments de la liste doivent être en ordre décroissant (au lieu de l'ordre croissant habituel). |
| start | number | Définit le numéro à partir duquel la liste ordonnée commence. 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 indique la position ordinale de la lettre dans l'alphabet. Par exemple, start="5" correspond à la lettre « E », donc la liste commence par elle. 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 du marqueur de liste (chiffres décimaux, lettres majuscules, lettres minuscules, chiffres romains majuscules, chiffres romains minuscules). |
La balise <ol> prend en charge les Attributs globaux et les Attributs d'événement.
Balises et propriétés associées
<ul>— une liste non ordonnée (à puces), lorsque l'ordre n'est pas significatif.<li>— l'élément de liste utilisé à l'intérieur des balises<ol>et<ul>.list-style-type— la propriété CSS pour choisir le style du marqueur.
Comment styliser une balise HTML <ol>
{
"tag_name": "ol"
}