Créer des listes ordonnées HTML avec

Les listes HTML ordonnées, aussi appelées listes nu­mé­ro­tées, sont la ré­ci­proque des listes non ordonnées : elles struc­tu­rent les puces de manière hié­rar­chique et al­pha­nu­mé­rique. Chaque liste ordonnée commence par la balise HTML <ol> et se termine par la balise </ol>. Les listes nu­mé­ro­tées pré­sen­tent l’avantage d’une meilleure clarté et d’un design plus lisible.

Qu’est-ce qu’une liste ordonnée HTML ?

Une HTML Ordered List désigne une liste ordonnée dans un document HTML ; elle re­pré­sente une séquence numérotée d’éléments de liste. Une telle liste est créée avec la balise <ol> et chaque élément de la liste est marqué avec la balise <li> (List Item, soit élément de liste). Par défaut, chaque élément au sein de la balise (ou tag) HTML <ol> est numéroté de manière crois­sante ; mais il existe d’autres pos­si­bi­li­tés de nu­mé­ro­ta­tion, comme des lettres ou des chiffres romains.

Les listes HTML ordonnées se ca­rac­té­ri­sent par un ordre d’énu­mé­ra­tion fixe, sig­ni­fi­ca­tif et hié­rar­chique. Les points de la liste ne peuvent et ne doivent pas se succéder n’importe comment, mais expriment une sé­man­tique grâce à la logique claire de leur ordre.

Pourquoi les listes sont-elles im­por­tantes pour le ré­fé­ren­ce­ment ?

La struc­tu­ra­tion claire des documents HTML joue un rôle important pour l’op­ti­mi­sa­tion pour les moteurs de recherche et pour l’ac­ces­si­bi­lité d’un site Web. Un texte bien structuré, logique et varié est aussi important pour le SEO que les mots-clés ou les balises méta HTML. Les listes ordonnées HTML font partie des éléments de mise en page les plus im­por­tants dont vous disposez en HTML, avec les titres, les sous-titres et les ca­rac­tères gras.

Quand utiliser une liste HTML ordonnée ?

Les ap­pli­ca­tions courantes des listes ordonnées incluent :

• Les ins­truc­tions/tutoriels étape par étape
• Les clas­se­ments/listes des meil­leures pratiques
• Le dé­rou­le­ment ou les séquences de processus de travail
• Les énu­mé­ra­tions hié­rar­chiques (par exemple, les in­gré­dients d’une recette)

Comment créer une liste HTML ordonnée ?

Pour donner à vos textes une structure claire grâce à des éléments de liste ordonnée, vous avez besoin des balises HTML suivantes :

• <ol> : marque le début d’une liste ordonnée
• </ol> : marque la fin d’une liste ordonnée
• <li> : commence un élément de liste
• </li> : ferme un élément de liste

La syntaxe d’une liste ordonnée se présente comme suit :

<ol>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste </li>
<li>Quatrième élément de la liste</li>
<li>...</li>
</ol>

Sauf in­di­ca­tion contraire dans le document HTML, les na­vi­ga­teurs utilisent par défaut les chiffres arabes dans l’ordre croissant.

Comment modifier la nu­mé­ro­ta­tion du tag HTML <ol> ?

Si vous souhaitez définir le type d’énu­mé­ra­tion ou la valeur de départ, vous avez besoin d’attributs HTML spéciaux qui vous per­met­tent de définir une énu­mé­ra­tion avec nombres et lettres, avec une valeur de départ ou dans l’ordre inverse.

Définir le type d’énu­mé­ra­tion avec type

Pour définir le type d’énu­mé­ra­tion, ajoutez l’attribut type au tag HTML <ol> comme suit :

<ol type="X"> 
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>...</li>
</ol>

Vous pouvez remplacer le caractère générique X par des chiffres, lettres ou chiffres romains, selon vos besoins :

• type=1 : définit la liste à puces avec des chiffres arabes com­men­çant à 1 (par défaut, sauf in­di­ca­tion contraire)
• type=A : définit l’énu­mé­ra­tion en lettres ma­jus­cules com­men­çant par A
• type=a : définit l’énu­mé­ra­tion en lettres mi­nus­cules com­men­çant par a
• type=i ou type=I : définit l’énu­mé­ra­tion en chiffres romains mi­nus­cules (i, ii, iii, iv…) ou ma­jus­cules (I, II, III, IV…)

Définir la valeur de départ avec l’attribut start

Si vous souhaitez que la liste ne commence pas par « 1 » ou « A », vous pouvez définir une valeur de départ per­son­na­li­sée de la manière suivante :

<ol start="X">
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>...</li>
</ol>

Ici, vous remplacez X par la valeur à partir de laquelle l’énu­mé­ra­tion doit commencer. Si vous souhaitez commencer l’énu­mé­ra­tion à partir du numéro 5 dans l’ordre croissant, le code approprié est le suivant :

<ol start="5">
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>...</li>
</ol>

Inverser l’énu­mé­ra­tion avec reversed

Pour inverser le sens de comptage de la liste, c’est-à-dire dans l’ordre dé­crois­sant au lieu de l’ordre croissant, utilisez l’ins­truc­tion reversed. La syntaxe est la suivante :

<ol start="1" reversed>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>...</li>
</ol>

En fonction de la taille de la liste, le comptage commence à la valeur la plus grande et descend jusqu’à 1.