Points Clés à Retenir
- Les listes HTML sont des outils indispensables pour la structuration et la présentation d’informations sur une page web. On distingue principalement trois types : les listes ordonnées, non ordonnées et de description.
- Les listes ordonnées emploient des chiffres ou des caractères pour hiérarchiser les éléments. L’attribut `type` permet de personnaliser le style, tandis que `start` et `reversed` modifient respectivement la position de départ et l’ordre d’affichage.
- Les listes non ordonnées regroupent des éléments connexes sans nécessiter un ordre spécifique. Le style des puces peut être customisé grâce au CSS.
Une liste HTML est un élément structurel fondamental pour tout ensemble de données liées sur une page web. Que ce soit pour concevoir un menu, organiser des articles en promotion ou présenter des informations complexes de manière lisible, les listes sont un atout précieux.
Il existe trois grandes catégories de listes HTML, chacune répondant à un objectif structurel précis dans le développement web.
1. Listes Ordonnées
Les listes ordonnées HTML permettent de structurer une série d’éléments liés selon un ordre précis. Pour créer une telle liste, il faut utiliser la balise `<ol>`. Cette balise englobe des balises `<li>`, chacune représentant un élément spécifique de la liste.
<ol> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> <li>Élément 4</li> </ol>
Ce code se traduit visuellement par :
Il est important de noter que le type de numérotation par défaut est numérique. Cependant, vous pouvez le modifier grâce à l’attribut `type`. Celui-ci offre la possibilité d’utiliser des lettres (majuscules ou minuscules), des chiffres ou des chiffres romains (majuscules ou minuscules).
<ol type="a"> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> <li>Élément 4</li> </ol>
L’ajout de l’attribut `type` à la balise `<ol>` modifie l’affichage comme suit :
En plus de `type`, deux autres attributs peuvent être utilisés avec `<ol>`: `start` et `reverse`.
L’attribut `start` permet de définir le point de départ de la numérotation en utilisant une valeur entière. Par exemple, `start= »3″` fera commencer la liste au chiffre 3 si aucun type n’est précisé. Si vous utilisez `type= »a »` ou `type= »I »`, le point de départ sera respectivement « c » ou « III ».
<ol type="I" start="3"> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> <li>Élément 4</li> </ol>
Le code ci-dessus produit l’affichage suivant :
L’attribut `reversed` inverse l’ordre de la liste. Il prend une valeur booléenne et sa valeur par défaut est `false`.
<ol reversed="true"> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> <li>Élément 4</li> </ol>
Ce code produit l’affichage suivant dans le navigateur :
2. Listes Non Ordonnées
Les listes non ordonnées permettent de regrouper des éléments liés dont l’ordre n’a pas d’importance. Par défaut, le navigateur utilise une puce pour identifier chaque élément.
Pour créer une nouvelle liste non ordonnée, la balise parent est `<ul>`, et chaque élément de la liste est contenu dans une balise `<li>` :
<ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> <li>Élément 4</li> </ul>
Ce code produit l’affichage suivant :
Le style de puce par défaut pour une liste non ordonnée est un disque. Autrefois, l’attribut `type` permettait de définir le style des puces, mais il est désormais obsolète. La méthode recommandée pour personnaliser le style est d’utiliser la propriété CSS `list-style-type`.
<style>
ul { list-style-type: square; }
</style>
Le code ci-dessus modifie l’affichage comme suit :
La propriété CSS `list-style-type` permet de choisir parmi différents styles de puces, incluant des cercles, des images personnalisées, des icônes ou des symboles. En combinant le CSS avec le positionnement des éléments de liste, vous pouvez même utiliser les listes non ordonnées pour créer des barres de navigation.
Listes Imbriquées
Une liste imbriquée est un élément de liste contenu à l’intérieur d’une autre liste. On peut les créer en combinant des listes ordonnées et/ou non ordonnées. Ces structures permettent de représenter des hiérarchies plus complexes.
<H3>Instructions pour les pâtes au poulet</H3>
<ol>
<li>Faire bouillir les pâtes.</li>
<li>
Assaisonner le blanc de poulet.
<ul>
<li>Sel et poivre</li>
<li>Paprika</li>
<li>Poudre d'ail</li>
<li>Assaisonnement italien</li>
</ul>
</li>
<li>Chauffer l'huile d'olive dans une poêle à feu moyen-vif.</li>
<li>Ajouter le blanc de poulet et cuire pendant 5 minutes.</li>
<li>Ajouter la crème épaisse et le parmesan dans la poêle vide.</li>
<li>Ajouter les pâtes et le poulet émincé à la sauce crème.</li>
</ol>
Ce code affiche le résultat suivant :
3. Listes de Descriptions
Les listes de description permettent de créer des listes de termes associés à leurs définitions. La balise `<dl>` permet de créer une nouvelle liste de descriptions. On l’utilise en association avec les éléments `<dt>` (terme de description) et `<dd>` (détails de la description).
<h3>Ordinateurs portables populaires</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Offre jusqu'à 22 heures d'autonomie,
dispose d'une caméra avancée et d'un clavier magic avec touch ID.
</dd>
<dt>MSI GS76 Stealth</dt>
<dd>
Un puissant ordinateur portable de jeu avec des graphiques surpuissants et des touches personnalisées.
</dd>
</dl>
Le code ci-dessus produit l’affichage suivant :
Organisez Votre Contenu avec la Bonne Liste HTML
Le choix de la liste HTML à utiliser dans un projet web doit dépendre du type de contenu que vous souhaitez présenter à vos utilisateurs. Par exemple, si vous souhaitez créer une liste séquentielle, comme les étapes d’une recette ou les instructions pour réaliser une tâche, une liste ordonnée est la solution idéale.
Cependant, si vous voulez regrouper des informations connexes qui n’impliquent pas un ordre particulier (comme une liste de vérification), une liste non ordonnée conviendra mieux. De plus, si vous souhaitez créer un glossaire ou une liste de questions fréquentes, une liste de descriptions est le meilleur choix.