Le saviez-vous – Attributs HTML start, reversed et type pour OL

Also available in: English

Quand vient le temps d’écrire des contenus riches, vous apprécierez en savoir plus sur les attributs HTML5 et les règles pour écrire des contenus accessibles et efficaces. Saviez-vous que l’élément OL vous permet de modifier certaines valeurs par défaut grâce à certains attributs ? Voyons comment faire.

C’est attributs HTML ont été dépréciés en HTML4 mais ont été ré-introduits avec HTML5.

L’attribut start

L’attribut start permet de démarrer une liste à une valeur différente de 1, la syntaxe est assez simple puisqu’il suffit d’écrire un nombre entier dans cet attribut.

<ol start="3">
    <li>Votre item</li>
    <!-- … -->
</ol>

Le résultat est le suivant :

3. Item 3
4. Item 4
5. Item 5

L’attribut reversed

L’attribut reversed vous permet d’inverser le compteur. Il n’inverse pas l’ordre « physique » des articles, juste le comptage.

<ol reversed="true">
    <li>Votre item</li>
    <!-- … -->
</ol>

Le résultat est le suivant :

1. Julie
2. Steven
3. Aurélien

L’attribut type

L’attribut type est proche de la propriété list-style-type dans CSS. Le but de cet attribut est de changer le type de numérotation.

• 'a' indique des lettres minuscules,
• 'A' indique des lettres majuscules,,
• 'i' indique des chiffres romains minuscules,
• 'I' indique des chiffres romains majuscules,,
• '1' indique des nombres (défault)

<ol type="I">
    <li>Votre item</li>
    <!-- … -->
</ol>

Le résultat est le suivant :

1. Premier Item
2. Second Item
3. Troisième One

Je recommande toujours d’utiliser la propriété CSS au lieu de l’attribut HTML pour des raisons de maintenabilité.

Plus d’informations que l’élément ol et ses attributs sur le MDN.

Les counter en CSS

Vous pouvez également en faire bien d’avantage grâce aux compteurs en CSS.

Bonne lecture !