OL (Balise HTML)

La balise HTML ol (ordered list, ou liste ordonnée en français) est utilisée pour créer une liste numérotée ou ordonnée dans une page web. Contrairement à la balise <ul> qui génère des listes non ordonnées (avec des puces), <ol> organise les éléments en suivant un ordre spécifique, généralement numéroté, alphabétique ou romain.

On utilise souvent la balise <ol> pour présenter des instructions, des étapes à suivre ou des classements. Elle convient à tout contenu nécessitant un ordre précis. Chaque élément de la liste est placé entre des balises <li>. Ainsi, le tout forme une séquence logique, facile à lire et à suivre.

Fonctionnement de la balise ol

La structure de base d’une liste ordonnée est la suivante :

<ol>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>
  • Ouverture et fermeture : La balise <ol> délimite le début et la fin de la liste.
  • Éléments de liste : Chaque élément de la liste est encapsulé dans une balise <li>.

Lorsque ce code est affiché dans un navigateur, il génère une liste numérotée par défaut :

  1. Élément 1
  2. Élément 2
  3. Élément 3

Attributs de la balise ol

La balise <ol> peut inclure plusieurs attributs pour personnaliser l’apparence ou le comportement de la liste :

  1. type : Définit le style des numéros. Les valeurs possibles incluent :
    • 1 : Numérotation standard (par défaut).A : Lettres majuscules (A, B, C…).a : Lettres minuscules (a, b, c…).I : Chiffres romains majuscules (I, II, III…).i : Chiffres romains minuscules (i, ii, iii…).
    Exemple :
<ol type="A">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ol>
  1. start : Spécifie le numéro ou la lettre de départ de la liste. Exemple 
<ol start="5">
  <li>Élément 5</li>
  <li>Élément 6</li>
</ol>
  1. reversed : Affiche la liste en ordre décroissant. Exemple :
<ol reversed>
  <li>Élément 3</li>
  <li>Élément 2</li>
  <li>Élément 1</li>
</ol>
  1. compact (obsolète) : Réduisait l’espacement entre les éléments dans les anciennes versions du HTML.

Utilisation courante

  1. Étapes d’un processus :
<ol>
  <li>Allumer l’ordinateur.</li>
  <li>Ouvrir le navigateur web.</li>
  <li>Saisir l’adresse du site web.</li>
</ol>
  1. Classements ou listes hiérarchiques :
<ol type="I">
  <li>Introduction</li>
  <li>Développement
    <ol type="a">
      <li>Point A</li>
      <li>Point B</li>
    </ol>
  </li>
  <li>Conclusion</li>
</ol>
  1. To-Do List organisée par priorité :
<ol start="3">
  <li>Préparer le matériel.</li>
  <li>Planifier les étapes.</li>
  <li>Exécuter le projet.</li>
</ol>

Avantages de la balise

  1. Organisation claire : Idéal pour structurer des données ou des informations nécessitant un ordre logique ou une séquence.
  2. Personnalisation : Grâce aux attributs comme type et start, les développeurs peuvent adapter le style des listes à leurs besoins.
  3. Accessibilité : Les lecteurs d’écran interprètent les listes ordonnées de manière distincte, aidant les utilisateurs à comprendre l’ordre ou l’importance des éléments.
  4. Compatibilité : La balise <ol> est compatible avec tous les navigateurs modernes.

Inconvénients de la balise

  1. Limitée au contenu ordonné : La balise <ol> convient uniquement au contenu ordonné. Pour des listes sans ordre spécifique, il vaut mieux utiliser <ul>.
  2. Dépendance au CSS pour personnalisation avancée : Pour obtenir des styles avancés, comme des icônes personnalisées ou des animations, il faut souvent recourir au CSS. Seule, la balise offre peu de flexibilité visuelle.
  3. Lecture difficile sans styles : Sans feuilles de style, la liste peut perdre en clarté. Une mauvaise configuration peut nuire à l’apparence et à la lecture du contenu.

Conclusion

La balise <ol> sert à présenter des informations dans un ordre logique ou hiérarchique. Elle permet de structurer clairement le contenu sur une page web. Combinée à des styles CSS modernes, elle devient à la fois esthétique et fonctionnelle. Certes, son usage s’applique à des cas précis. Toutefois, elle reste un outil essentiel dans l’arsenal des développeurs web.

Catégories d’articles