Introduction à l'utilisation de la balise <ol> pour créer une liste ordonnée en HTML

En HTML, pour créer une liste ordonnée c’est-à-dire une liste dont les éléments sont numérotés, nous utilisons la balise <ol>. Le terme HTML "ol" fait référence à "ordered list", ce qui en français signifie "liste ordonnée".

Comment utiliser la balise <ol>

La balise <ol> est une balise de bloc qui peut contenir plusieurs éléments de liste, marqués par la balise <li>. Chaque élément de la liste apparaîtra comme un élément individuel et sera précédé d'un numéro.

Voici un exemple d'utilisation :

<ol>
  <li>Pommes</li>
  <li>Bananes</li>
  <li>Cerises</li>
</ol>

Dans cet exemple, le texte affiché à l'écran apparaitra sous forme de liste à puce numérotée :

1. Pommes
2. Bananes
3. Cerises

Il est important de noter que contrairement à la balise <ul>, qui crée une liste non ordonnée (les éléments sont affichés avec des puces), la balise <ol> crée une liste ordonnée où chaque élément est numéroté.

Bonnes pratiques

Il est toujours préférable de nester vos listes si vous avez besoin de sous-listes. Un exemple serait :

<ol>
  <li>Fruits
    <ol>
      <li>Pommes</li>
      <li>Bananes</li>
    </ol>
  </li>
  <li>Légumes
    <ol>
      <li>Carottes</li>
      <li>Brocolis</li>
    </ol>
  </li>
</ol>

Cette pratique facilite la lecture et est plus claire pour l'utilisateur.

La balise <ol> est très flexible et peut être personnalisée en utilisant les attributs et les feuilles de style CSS. Par exemple, vous pouvez modifier le type de numérotation (chiffres, lettres, chiffres romains...) en utilisant l'attribut "type", ou vous pouvez contrôler à partir de quel numéro la liste commence en utilisant l'attribut "start".

L'HTML est un langage riche et polyvalent et la balise <ol> n'est que l'une des nombreuses balises que vous pouvez utiliser pour structurer et organiser votre contenu. En apprendre davantage sur ces outils et comment les utiliser efficacement peut améliorer grandement votre site web.