Créer des listes ordonnées HTML avec

Les listes HTML ordonnées, aussi appelées listes numérotées, sont la réciproque des listes non ordonnées : elles structurent les puces de manière hiérarchique et alphanumérique. Chaque liste ordonnée commence par la balise HTML <ol> et se termine par la balise </ol>. Les listes numérotées présentent 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 repré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 croissante ; mais il existe d’autres possibilités de numérotation, comme des lettres ou des chiffres romains.

Les listes HTML ordonnées se caractérisent par un ordre d’énumération fixe, significatif et hiérarchique. Les points de la liste ne peuvent et ne doivent pas se succéder n’importe comment, mais expriment une sémantique grâce à la logique claire de leur ordre.

Pourquoi les listes sont-elles importantes pour le référencement ?

La structuration claire des documents HTML joue un rôle important pour l’optimisation pour les moteurs de recherche et pour l’accessibilité 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 importants dont vous disposez en HTML, avec les titres, les sous-titres et les caractères gras.

Quand utiliser une liste HTML ordonnée ?

Les applications courantes des listes ordonnées incluent :

• Les instructions/tutoriels étape par étape
• Les classements/listes des meilleures pratiques
• Le déroulement ou les séquences de processus de travail
• Les énumérations hiérarchiques (par exemple, les ingré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 indication contraire dans le document HTML, les navigateurs utilisent par défaut les chiffres arabes dans l’ordre croissant.

Comment modifier la numérotation du tag HTML <ol> ?

Si vous souhaitez définir le type d’énumération ou la valeur de départ, vous avez besoin d’attributs HTML spéciaux qui vous permettent de définir une énumération avec nombres et lettres, avec une valeur de départ ou dans l’ordre inverse.

Définir le type d’énumération avec type

Pour définir le type d’énumération, 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 commençant à 1 (par défaut, sauf indication contraire)
• type=A : définit l’énumération en lettres majuscules commençant par A
• type=a : définit l’énumération en lettres minuscules commençant par a
• type=i ou type=I : définit l’énumération en chiffres romains minuscules (i, ii, iii, iv…) ou majuscules (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 personnalisé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’énumération doit commencer. Si vous souhaitez commencer l’énumération à 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’énumération avec reversed

Pour inverser le sens de comptage de la liste, c’est-à-dire dans l’ordre décroissant au lieu de l’ordre croissant, utilisez l’instruction 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.