Les listes HTML sont utilisées pour spécifier des listes d’informations. Toutes les listes peuvent contenir un ou plusieurs éléments de liste. Il existe trois types de listes HTML:
- Liste ordonnée ou liste numérotée (ol)
- Liste non ordonnée ou liste à puces (ul)
- Liste de description ou liste de définition (dl)
Remarque: nous pouvons créer une liste dans une autre liste, appelée liste imbriquée.
Liste ordonnée ou liste numérotée
Dans les listes HTML ordonnées, tous les éléments de la liste sont marqués d’un numéro par défaut. Il est également appelé liste numérotée. La liste ordonnée commence par la balise <ol> et les éléments de la liste commencent par la balise <li>.
<ol> <li>Étoile</li> <li>Nuages</li> <li>Soleil</li> <li>Arbres</li> </ol>
Résultat :
- Étoile
- Nuages
- Soleil
- Arbres
Liste non ordonnée ou liste à puces
Dans la liste HTML non ordonnée, tous les éléments de la liste sont marqués par des puces. Il est également connu sous le nom de liste à puces également. La liste non ordonnée commence par la balise <ul> et les éléments de la liste commencent par la balise <li>.
<ul> <li>Étoile</li> <li>Nuages</li> <li>Soleil</li> <li>Arbres</li> </ul>
Résultat :
- Étoile
- Nuages
- Soleil
- Arbres
Liste de description ou liste de définition
La liste de description HTML est également un style de liste pris en charge par HTML et XHTML. Il est également connu sous le nom de liste de définition où les entrées sont répertoriées comme un dictionnaire ou une encyclopédie
La liste de définitions est très appropriée lorsque vous souhaitez présenter un glossaire, une liste de termes ou une autre liste de noms-valeurs.
La liste de définitions HTML contient les trois balises suivantes:
- La balise <dl> définit le début de la liste.
- La balise <dt> définit un terme.
- La balise <dd> définit la définition du terme (description).
<dl> <dt>Soleil</dt> <dd>-Grande étoile dans le ciel.</dd> <dt>Nissan</dt> <dd>-Marque d'une voiture</dd> <dt>Lion</dt> <dd>-Un animale, le roi de la jungle.</dd> <dt>Java</dt> <dd>-Langage de programmation</dd> </dl>
Résultat :
- Soleil
- -Grande étoile dans le ciel.
- Nissan
- -Marque d’une voiture
- Lion
- -Un animale, le roi de la jungle.
- Java
- -Langage de programmation
Liste imbriquée
Une liste dans une autre liste est appelée liste imbriquée. Si vous voulez une liste à puces dans une liste numérotée, ce type de liste sera appelé liste imbriquée.
Code :
<!DOCTYPE html>
<html>
<head>
<title>liste imbriqué</title>
</head>
<body>
<p>Liste des pays et leurs capitales</p>
<ol>
<li>France
<ul>
<li>Paris</li>
</ul>
</li>
<li>Italie
<ul>
<li>Rome</li>
</ul>
</li>
<li>Egypte
<ul>
<li>Caire</li>
</ul>
</li>
<li>USA
<ul>
<li>New York</li>
</ul>
</li>
<li>Allemagne
<ul>
<li>Berlin</li>
</ul>
</li>
<li>Russie
<ul>
<li>Mosko</li></ul>
</li>
</ol>
</body>
</html>
Résultat :
