Listes ordonnées en HTML

Créer une liste ordonnée

En HTML, une liste ordonnée est créée à l'aide de la balise <ol>. La balise <ol> sert de conteneur pour les éléments de la liste, qui sont représentés par la balise <li>. Chaque balise <li> représente un élément dans la liste ordonnée.

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

La balise <ol> entoure les éléments de la liste, et chaque élément est encapsulé dans une balise <li>. Le navigateur numérote les éléments par ordre croissant, en commençant par 1.

Vous pouvez ajouter autant d'éléments que nécessaire à l'intérieur de la balise <ol>. Chaque balise <li> peut contenir du texte, des images ou d'autres éléments HTML.

<ol>
  <li>Fruits
    <ol>
      <li>Pomme</li>
      <li>Banane</li>
      <li>Orange</li>
    </ol>
  </li>
  <li>Légumes
    <ol>
      <li>Carotte</li>
      <li>Brocoli</li>
      <li>Épinard</li>
    </ol>
  </li>
</ol>

L'exemple montre une liste ordonnée avec deux éléments principaux : "Fruits" et "Légumes". Chacun de ces éléments contient une liste ordonnée imbriquée avec des fruits et des légumes spécifiques. Le navigateur affichera la liste avec une indentation et une hiérarchie de numérotation appropriées.

Par défaut, la balise <ol> crée une liste numérotée commençant par 1. Cependant, vous pouvez modifier le style de numérotation et la valeur de départ en utilisant les attributs type et start, qui seront abordés dans la section suivante.

Personnalisation des listes ordonnées

HTML offre des options pour personnaliser l'apparence et le comportement des listes ordonnées. Vous pouvez modifier le style de numérotation et commencer la numérotation à partir d'une valeur spécifique en utilisant les attributs type et start.

<ol type="A">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

<ol type="i">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

<ol start="5">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

Listes ordonnées imbriquées

Vous pouvez imbriquer des listes ordonnées en HTML pour créer une structure hiérarchique. L'imbrication vous permet de représenter des sous-listes ou des sous-éléments au sein d'un élément principal de la liste. Cela est utile lorsque vous devez décomposer une liste en plusieurs niveaux ou catégories.

Pour créer une liste ordonnée imbriquée, vous placez une balise <ol> à l'intérieur d'une balise <li> de la liste parente. La liste imbriquée devient un enfant de l'élément parent de la liste.

<ol>
  <li>Élément principal 1
    <ol>
      <li>Sous-élément 1.1</li>
      <li>Sous-élément 1.2</li>
      <li>Sous-élément 1.3</li>
    </ol>
  </li>
  <li>Élément principal 2
    <ol>
      <li>Sous-élément 2.1</li>
      <li>Sous-élément 2.2</li>
    </ol>
  </li>
  <li>Élément principal 3</li>
</ol>

Nous avons une liste ordonnée principale avec trois éléments. Les deux premiers éléments, "Élément principal 1" et "Élément principal 2", contiennent des listes ordonnées imbriquées.

Les listes imbriquées sont en retrait et ont leur propre séquence de numérotation. Les sous-éléments sous "Élément principal 1" sont numérotés 1.1, 1.2 et 1.3, tandis que les sous-éléments sous "Élément principal 2" sont numérotés 2.1 et 2.2.

Vous pouvez imbriquer des listes ordonnées sur plusieurs niveaux en plaçant des balises <ol> supplémentaires à l'intérieur des balises <li> des listes imbriquées. Cela vous permet de créer des structures hiérarchiques complexes.

<ol>
  <li>Élément principal 1
    <ol>
      <li>Sous-élément 1.1
        <ol>
          <li>Sous-sous-élément 1.1.1</li>
          <li>Sous-sous-élément 1.1.2</li>
        </ol>
      </li>
      <li>Sous-élément 1.2</li>
    </ol>
  </li>
  <li>Élément principal 2</li>
</ol>

Nous avons une liste ordonnée imbriquée à plusieurs niveaux. Le "Sous-élément 1.1" contient sa propre liste ordonnée imbriquée avec deux sous-sous-éléments.

Lors de l'imbrication de listes ordonnées, il est important de maintenir la hiérarchie et l'indentation claires et logiques. Cela améliore la lisibilité et la compréhension de la structure de la liste pour les utilisateurs et les moteurs de recherche.

Les listes ordonnées imbriquées sont couramment utilisées dans divers scénarios, tels que la création de plans, la représentation de données hiérarchiques ou l'affichage de menus de navigation à plusieurs niveaux.

Styliser les listes ordonnées avec CSS

Bien que HTML fournisse la structure pour les listes ordonnées, CSS vous permet de styliser et de modifier leur apparence. Avec CSS, vous pouvez changer l'aspect des marqueurs de liste, les couleurs, l'espacement et appliquer d'autres styles pour améliorer l'apparence de vos listes ordonnées et les faire correspondre au design de votre site web.

Pour styliser une liste ordonnée, vous pouvez utiliser la balise <ol> et ses éléments de liste (<li>) avec des sélecteurs CSS. Voici quelques propriétés CSS courantes que vous pouvez utiliser :

ol {
  list-style-type: lower-roman;
}

ol {
  color: #333;
}

ol {
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

li {
  margin-bottom: 10px;
}

ol {
  background-color: #f5f5f5;
}

li {
  background-color: #fff;
  padding: 5px;
}

Vous pouvez également utiliser des pseudo-classes CSS pour styliser des éléments de liste spécifiques ou des états. Par exemple :

• :first-child et :last-child : Ciblent le premier et le dernier élément de la liste.
• :nth-child(odd) et :nth-child(even) : Stylisent différemment les éléments de liste pairs ou impairs.
• :hover : Applique des styles lorsque l'utilisateur passe la souris sur un élément de la liste.

li:first-child {
  font-weight: bold;
}

li:last-child {
  color: #ff0000;
}

li:nth-child(odd) {
  background-color: #f9f9f9;
}

li:hover {
  text-decoration: underline;
}

En combinant ces propriétés et sélecteurs CSS, vous pouvez créer des listes ordonnées attrayantes qui correspondent au design de votre site web.

Gardez vos styles cohérents et pensez à la lisibilité et à l'accessibilité de vos listes. Utilisez des contrastes de couleurs appropriés, des tailles de police et des espacements pour vous assurer que vos listes ordonnées sont faciles à lire et à comprendre pour tous les utilisateurs.

Considérations d'accessibilité

Lors de l'utilisation de listes ordonnées en HTML, il est important de tenir compte de l'accessibilité. Les listes ordonnées doivent être utilisées de manière significative et avec une structure appropriée pour aider tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance, à comprendre et à naviguer facilement dans le contenu.

Voici quelques bonnes pratiques pour utiliser les listes ordonnées afin d'améliorer l'accessibilité web :

En plus de suivre ces bonnes pratiques, il est important de fournir des alternatives textuelles significatives pour les éléments de la liste lorsque c'est nécessaire. Cela est particulièrement pertinent lorsque les éléments de la liste contiennent des images ou des icônes sans texte d'accompagnement.

<ol>
  <li>
    <img src="step1.jpg" alt="Étape 1 : Saisissez votre nom d'utilisateur et votre mot de passe">
  </li>
  <li>
    <img src="step2.jpg" alt="Étape 2 : Cliquez sur le bouton de connexion">
  </li>
  <li>
    <img src="step3.jpg" alt="Étape 3 : Accédez au tableau de bord de votre compte">
  </li>
</ol>

Chaque élément de la liste contient une image représentant une étape d'un processus. Pour rendre le contenu accessible, l'attribut alt est utilisé pour fournir une alternative textuelle pour chaque image. Le texte alternatif décrit clairement l'action ou le but de chaque étape.

En fournissant des alternatives textuelles significatives, les utilisateurs qui dépendent de lecteurs d'écran ou qui ont désactivé les images peuvent toujours comprendre le contenu et suivre les étapes.

N'oubliez pas que l'accessibilité est un aspect essentiel du développement web. En utilisant correctement les listes ordonnées et en suivant les pratiques d'accessibilité, vous pouvez créer des expériences web inclusives et conviviales pour tous les utilisateurs.