1. A propos des listes HTML
Les listes en HTML jouent un rôle essentiel dans l'organisation et la structuration du contenu d'une page web. Elles permettent de présenter des informations sous forme d'éléments ordonnés ou non ordonnés, ce qui facilite la compréhension et la lisibilité du contenu pour les utilisateurs. Le langage HTML offre possède 3 type de listes:
- ul (unordored list) : Liste non ordonnée
- ol (ordored list) : Liste ordonnée
- dl (definition list) : Liste de définition
2. Liste non ordonnée (<ul>: unordered list)
Une liste non ordonnée est utilisée pour afficher des éléments sans ordre spécifique. Chaque élément est représenté par une puce par défaut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Liste non ordonnée</title> </head> <body> <h2>Exemple de liste non ordonnée</h2> <ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ul> </body> </html> |
3. Liste ordonnée (<ol>)
Une liste ordonnée est utilisée pour afficher des éléments avec un ordre spécifique. Chaque élément est représenté par un numéro par défaut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Liste ordonnée</title> </head> <body> <h2>Exemple de liste ordonnée</h2> <ol> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ol> </body> </html> |
4. Liste de définition (<dl>)
Une liste de définition est utilisée pour afficher des termes (terme de définition) associés à leur signification (définition). Chaque terme est représenté par une balise <dt>, et chaque définition est représentée par une balise <dd>. Cette structure est utile pour présenter des glossaires, des termes techniques ou tout autre contenu nécessitant une définition explicite. Vous pouvez également personnaliser l'apparence de la liste de description en utilisant du CSS pour s'adapter à la conception globale de votre site web.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Liste de définition</title> </head> <body> <h2>Exemple de liste de définition</h2> <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> <dt>JS</dt> <dd>JavaScript</dd> </dl> </body> </html> |
Explication :
- La balise <dl> (description list): est utilisée pour définir la liste de description.
- La balise <dt> (definition term): est utilisée pour définir un terme (terme de définition) à l'intérieur de la liste. C'est le titre ou le mot que vous souhaitez définir.
- La balise <dd> (definition description): est utilisée pour définir la signification ou la description du terme défini à l'intérieur de la liste.
Ces exemples illustrent les trois types de listes en HTML. Vous pouvez utiliser ces balises pour structurer les informations de vos pages web de manière claire et organisée. N'hésitez pas à les personnaliser en utilisant des styles CSS pour les adapter au design de votre site web.
5. Personnaliser l'indice de début d'une liste ordonnée (<ol>)
En HTML, vous pouvez changer l'indice de début d'une liste ordonnée (<ol>) en utilisant l'attribut start. Par défaut, une liste ordonnée commence à 1, mais vous pouvez spécifier un autre numéro pour changer l'indice de début:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Liste ordonnée avec indice de début modifié</title> </head> <body> <h2>Exemple de liste ordonnée avec indice de début modifié</h2> <ol start="5"> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ol> </body> </html> |
Dans cet exemple, la liste ordonnée commence à 5 au lieu de 1. Les éléments de la liste seront numérotés à partir de l'indice 5, comme suit :
Vous pouvez modifier la valeur de l'attribut start selon vos besoins pour commencer la liste à n'importe quel numéro souhaité. Cela peut être utile si vous voulez continuer une liste numérotée à partir d'un certain point ou si vous avez besoin de changer la numérotation pour des raisons de mise en page ou de présentation.
Younes Derfoufi
CRMEF OUJDA
