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.
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
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
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>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <ol>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <ol>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <ol>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
