Vidéo: Cours Complet HTML CSS - Tutoriel pour Débutants et Confirmés [Partie 1/3] 2025
Les en-têtes et les paragraphes ne sont pas toujours suffisants. Parfois, vous avez également besoin de listes sur vos pages. Lorsque vous décidez comment présenter vos données, considérez vos options. Si le texte s'inscrit dans des balles courtes, présentez-le de cette façon.
Les listes à puces fonctionnent très bien sur le Web, où votre auditoire recherchera des informations rapides et faciles d'accès. L'utilisation de listes numérotées peut également aider vos visiteurs à obtenir rapidement le point. Le code pour les listes - à puces ou numérotées - est assez simple. Vous pouvez placer l'en-tête d'une liste dans une balise de paragraphe ou dans une balise de titre, selon ce qui convient le mieux à la situation.
En HTML (et en écriture et publication), les listes à puces sont appelées "listes non ordonnées" car elles ne listent que les éléments sans ordre d'importance (et utilisent la balise
-
). En comparaison, les listes numérotées sont des «listes ordonnées» parce que l'ordre est important; ils utilisent la balise
- .
Jetez un oeil à l'exemple suivant, qui crée une liste simple à puces (non ordonnée):
Ma liste de fruits
- pommes
- bananes
- oranges
Dans l'exemple précédent, notez que la balise de paragraphe est fermée avant le début des balises de liste. Notez également que la balise
- est utilisée pour chaque élément de la liste.
Pour transformer cette liste en liste numérotée, utilisez
-
(pour liste ordonnée ) à la place de la balise
-
- et n'oubliez pas de la fermer avec la balise
Parfois, une liste contient des sous-éléments imbriqués. Le code pour que cela se produise ressemble à ceci:
Ma liste de fruits
- pommes
- rouge
- vert
- jaune
- bananes
- oranges
Dans un navigateur (sans définition styles), la liste ressemble à celle de la figure suivante avec des puces et des retraits pour les sous-puces.
Les sous-éléments de l'élément pommes font partie d'une deuxième liste non ordonnée. Remarquez comment la liste des sous-éléments commence et est fermée entre les
- pommes
- et de l'élément de la liste des pommes. Le navigateur les affiche en tant qu'éléments en retrait sous les pommes de la liste principale.
-
. Toutefois, les éléments des deux types de listes sont définis à l'aide de la balise list
