HTML 5 - 2.5 : Associez vos données des listes
Bienvenue dans ce cours d'HTML5. Cette leçon montre comment associer vos données à des listes. Il existe deux types principaux de listes en HTML : les listes non ordonnées (sans numérotation) et les listes ordonnées (avec numérotation). Les listes non ordonnées se créent avec la balise <ul> (unordered list). À l'intérieur, chaque élément est encadré par une balise <li> (list item). Par défaut, le navigateur affiche des petits points (bullet points) devant chaque élément. Ces puces peuvent être modifiées via CSS, que nous verrons plus tard.
Listes ordonnées et listes de description
Pour une liste ordonnée, on utilise la balise <ol> (ordered list) avec les mêmes <li> à l'intérieur. Après actualisation, on voit que les éléments sont numérotés 1, 2, etc. L'attribut type permet de changer le style de numérotation :
type="1"(par défaut) : 1, 2, 3...type="A": A, B, C...type="a": a, b, c...type="I": chiffres romains majuscules (I, II, III)type="i": chiffres romains minuscules
On peut aussi définir un point de départ avec l'attribut start : par exemple start="2" commencera à 2, puis continuera 3, 4, 5... L'attribut reversed inverse la numérotation. Enfin, il existe un troisième type de liste : la liste de description avec la balise <dl> (description list). À l'intérieur, on alterne : <dt> (description term) pour le terme à définir, et <dd> (description details) pour sa description. Par exemple, pour notre article : <dt>Auteur</dt> <dd>Jane Doe</dd> <dt>Twitter</dt> <dd>@janedoe</dd>. Après actualisation, on voit un format à deux niveaux où chaque terme apparaît au-dessus de sa description en retrait. Voilà comment associer vos données à différents types de listes en HTML !
En résumé
Cette leçon vous guide à travers les trois types de listes HTML pour structurer et associer vos données de manière sémantique. Vous apprendrez à créer des listes non ordonnées avec `<ul>`, des listes ordonnées avec `<ol>` (avec options de numérotation personnalisée), et des listes de définitions avec `<dl>` pour associer termes et descriptions.
Points clés
- Les listes non ordonnées (`<ul>`) utilisent des puces par défaut et encapsulent chaque élément dans une balise `<li>`
- Les listes ordonnées (`<ol>`) permettent une numérotation personnalisable via l'attribut `type` (valeurs : 1, a, A, i, I)
- L'attribut `start` de la balise `<ol>` permet de commencer la numérotation à un nombre spécifique
- L'attribut `reversed` inverse l'ordre de numérotation (pour les comptes à rebours ou listes décroissantes)
- Les listes de définitions (`<dl>`, `<dt>`, `<dd>`) structurent les paires terme-description, idéales pour les glossaires
Questions fréquentes
Comment changer le style des puces d'une liste non ordonnée ?
Les puces par défaut peuvent être personnalisées via CSS, ce qui sera abordé ultérieurement dans le cours. Sans style CSS, les listes affichent des points simples.
Comment créer une liste numérotée commençant à 2 au lieu de 1 ?
Utilisez l'attribut `start="2"` dans la balise `<ol>` pour commencer la numérotation à partir de 2, les éléments suivants continueront incrémentalement.
À quoi servent exactement les listes de définitions `<dl>` ?
Les listes de définitions associent des termes (`<dt>`) à leurs descriptions (`<dd>`). Elles sont idéales pour les glossaires, métadonnées de contenu ou paires clé-valeur sémantiques.