Table des matières
Points clés à retenir
- Les listes HTML sont essentielles pour organiser et présenter les données sur une page Web. Il existe trois types principaux : les listes ordonnées, non ordonnées et les listes de description.
- Les listes ordonnées utilisent des chiffres ou d’autres caractères pour classer les éléments. L’attribut type permet la personnalisation, tandis que les attributs start et reversed modifient la position et l’ordre de départ.
- Les listes non ordonnées regroupent les éléments associés sans ordre spécifique. Le style de puce peut être personnalisé à l’aide de CSS.
Une liste HTML est un élément structurel essentiel pour tout groupe de données associées sur une page Web. Que vous créiez un menu, organisiez des articles en vente ou essayiez de présenter des données complexes sous une forme plus lisible, les listes suivantes vous aideront à faire le travail.
Il existe trois principaux types de listes HTML, chacune servant un objectif structurel spécifique dans le développement Web.
1. Liste ordonnée
La liste ordonnée HTML vous permet de regrouper une liste d’éléments associés dans un ordre spécifique. Pour créer une nouvelle liste ordonnée, vous devrez utiliser la balise
- . La balise
- . Chaque élément de liste (balise
- ) contiendra un élément spécifique dans la liste.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Ce code affiche la vue suivante :
Vous devez noter que le type de classement par défaut de la liste ordonnée est constitué de nombres, mais vous pouvez le modifier à l’aide de l’attribut type. L’attribut type vous donne le pouvoir de décider quel élément ordonnera votre liste. Vous avez la possibilité d’utiliser l’alphabet (majuscule ou minuscule), des chiffres ou des chiffres romains (majuscules ou minuscules).
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>L’ajout de l’attribut type à la balise
- affiche la vue mise à jour suivante :
- pour chaque élément de la liste :
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Ce code affiche la vue suivante :
Le style de puce par défaut pour une liste non ordonnée est un disque. Dans le passé, vous pouviez utiliser un attribut de type pour définir le style de puce d’une liste non ordonnée. Cependant, l’attribut de type liste non ordonnée est désormais un attribut obsolète. L’alternative recommandée pour le style de liste non ordonnée est la propriété CSS list-style-type.
<style>
ul { list-style-type: square; }
</style>Le code ci-dessus met à jour la vue comme suit :
La propriété CSS list-style-type vous permet d’utiliser une collection de différents styles de puces, notamment des cercles, des images personnalisées, des icônes ou des symboles. Avec CSS qui modifie la disposition des éléments de liste, vous pouvez même utiliser des listes non ordonnées pour créer des barres de navigation.
Listes imbriquées
Une liste imbriquée est un élément de liste qui fait partie d’une autre liste. Vous pouvez créer une liste imbriquée en utilisant une combinaison d’éléments de liste ordonnés et/ou non ordonnés. Ces structures peuvent représenter des hiérarchies plus complexes.
<H3>Chicken Pasta Insturctions</H3>
<ol>
<li>Boil pasta.</li>
<li>
Season chicken breast.
<ul>
<li>salt and pepper</li>
<li>paprika</li>
<li>garlic powder</li>
<li>Italian seasoning</li>
</ul>
</li>
<li>Heat olive oil in pot over medium-high heat.</li>
<li>Add chicken breast to pan and cook for 5 minutes.</li>
<li>Add heavy cream and parmesan cheese to empty pot.</li>
<li>Add pasta and slice chicken to cream sauce.</li>
</ol>Ce code affiche la vue suivante :
3. Liste de descriptions
L’élément de liste de description vous permet de créer une liste de termes et leurs détails associés. La balise
- vous permet de créer une nouvelle liste de descriptions, que vous devez utiliser avec les éléments
- (terme de description) et
- (détails de la description).
<h3>Popular Laptops</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Provides up to 22 hours of battery life,
has an advanced camera, and a magic keyboard with touch ID.
</dd><dt>MSI GS76 Stealth</dt>
<dd>
A powerful gaming laptop with supercharged graphics and customized keys.
</dd>
</dl>Le code ci-dessus affiche la vue suivante :
Organisez votre contenu avec la bonne liste HTML
La liste HTML que vous choisissez d’utiliser dans votre projet de développement Web doit dépendre du contenu que vous souhaitez présenter à vos utilisateurs. Par exemple, si vous souhaitez créer une liste séquentielle telle que les étapes de préparation d’un repas ou d’exécution d’une tâche, une liste ordonnée est votre meilleure option.
Toutefois, si vous souhaitez regrouper des informations connexes qui ne nécessitent pas une série d’étapes (comme une liste de contrôle), une liste non ordonnée serait une option plus viable. De plus, si vous souhaitez créer un glossaire ou une liste de questions fréquemment posées, une liste de descriptions est le meilleur choix.
En plus de l’attribut type, il existe deux autres attributs que vous pouvez utiliser avec la balise
- : start et reverse.
L’attribut start vous permet de commencer à commander à partir de n’importe quelle position en utilisant une valeur entière. Par exemple, si vous ajoutez start=”3″ à la balise
- , sans spécifier de type, la liste commencera à être classée à partir du numéro trois. Si vous attribuez un type=”a” ou un type=”I”, il commencera à commander à partir de c ou III, respectivement.
<ol type="I" start="3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Le code ci-dessus affiche la vue suivante :
L’attribut inversé permet d’inverser l’ordre de la liste. Il accepte une valeur booléenne et sa valeur par défaut est false.
<ol reversed="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Ce code produit la sortie suivante dans le navigateur :
2. Liste non ordonnée
La liste non ordonnée vous permet de regrouper des éléments associés dont l’ordre n’est pas significatif. Par défaut, un navigateur utilise une puce pour étiqueter chaque élément.
Pour créer une nouvelle liste non ordonnée, vous devrez utiliser la balise
- comme élément parent et la balise
- pour chaque élément de la liste :
- regroupe et contient des balises