English

<ol>

Lister des étapes, un classement, l'ordre compte

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • listes

<ol> + <li> — La liste ordonnée

La balise <ol> représente une liste ordonnée : un groupe d'éléments dont l'ordre est significatif. Chaque élément est un <li>. Les attributs start, reversed et type permettent de contrôler la numérotation.

Quand l'utiliser

Tu veux afficher des étapes d'un processus, un classement, un tutoriel pas-à-pas, une recette de cuisine ou tout contenu où la séquence compte.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran annoncent la position de chaque élément ("élément 3 sur 7"). L'utilisateur sait où il en est dans la sequence sans voir les numéros.

Exemple de code

<ol>
  <li>Clone the repository</li>
  <li>Install dependencies</li>
  <li>Run the development server</li>
</ol>
 
<h2>Top 3 finishers</h2>
<ol reversed>
  <li>Alice — 2h12</li>
  <li>Bob — 2h08</li>
  <li>Carol — 1h59</li>
</ol>

Pour aller plus loin