Believemy logo purple

<ol>

Permet de définir une liste ordonnée avec HTML.
Believemy logo

La balise <ol> est utilisée en HTML pour définir une liste ordonnée. Elle permet d'afficher une liste dans laquelle les éléments sont présentés dans un ordre spécifique (par exemple, numérotés de 1 à n).

 

Structure et syntaxe de la balise <ol>

Structure et syntaxe de base

Voici la syntaxe de base de la balise <ol> :

HTML
<ol>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

La balise <ol> est utilisée pour contenir une série d'éléments de liste. Chaque élément de la liste est défini à l'aide de la balise <li>.

 

Exemple d’utilisation

Voici un exemple d’utilisation de la balise <ol> pour une liste ordonnée :

HTML
<ol>
  <li>Commencer le projet</li>
  <li>Analyser les besoins</li>
  <li>Développer le code</li>
  <li>Tester l’application</li>
</ol>

Dans cet exemple, chaque élément de la liste est numéroté automatiquement par le navigateur.

 

Attributs

La balise <ol> peut accepter certains attributs pour personnaliser l’affichage de la liste :

  • type : Définit le type de numérotation (par exemple, 1 pour des chiffres, a pour des lettres, etc.).
  • start : Spécifie le numéro de départ de la liste. Par défaut, la liste commence à 1.

 

Exemple d'attributs

HTML
<ol type="a" start="3">
  <li>Troisième élément</li>
  <li>Quatrième élément</li>
</ol>

Dans cet exemple, la liste commence à la lettre "c" (correspondant à 3) et utilise des lettres pour numéroter les éléments.

 

Différence avec d’autres balises similaires

  • <ul> : La balise <ul> est utilisée pour une liste non ordonnée, c’est-à-dire que les éléments sont affichés sans ordre particulier (généralement avec des puces).
  • <li> : La balise <li> est utilisée pour définir les éléments dans une liste ordonnée (<ol>) ou non ordonnée (<ul>).
  • <dl> : Enfin la balise <dl> est consacrée à créer des listes de définitions exclusivement et uniquement.

 

Compatibilité des navigateurs

La balise <ol> est prise en charge par tous les navigateurs modernes.

NavigateurCompatibilité
ChromeOui
FirefoxOui
SafariOui
EdgeOui
Internet ExplorerOui

Découvrez notre glossaire HTML et CSS

Parcourez les termes et définitions les plus couramment utilisés dans le domaine du développement HTML et CSS.