Tutoriel du HTML (partie 6)

Comment créer des listes à puces en HTML avec UL et LI

Pour créer une liste non numérotée (aussi appelée liste à puces), on utilise les balises <UL></UL> pour délimiter la liste, et les balises <LI></LI> pour chaque élément.

Exemple de liste simple

<UL>
<LI>Ligne 1</LI>
<LI>Ligne 2</LI>
</UL>

Résultat :

Faites un copier-coller du code pour voir le résultat.

Comment créer une liste imbriquée (sous-liste)

Pour créer une liste imbriquée, il suffit d'insérer une nouvelle liste <UL> à l'intérieur d'un élément <LI>.

<UL>
<LI>Ligne 1</LI>
<LI>Ligne 2
<UL>
<LI>Ligne 2.1</LI>
<LI>Ligne 2.2
<UL>
<LI>Ligne 2.2.1</LI>
<LI>Ligne 2.2.2
<UL>
<LI>Ligne 2.2.2.1</LI>
<LI>Ligne 2.2.2.2</LI>
</UL>
</LI>
<LI>Ligne 2.2.3</LI>
<LI>Ligne 2.2.4</LI>
</UL>
</LI>
<LI>Ligne 2.3</LI>
<LI>Ligne 2.4</LI>
</UL>
</LI>
<LI>Ligne 3</LI>
<LI>Ligne 4</LI>
</UL>

Résultat :

Copiez-collez ce code pour observer les différents niveaux d'imbrication.

Comment personnaliser le type de puce

Vous pouvez modifier l'apparence des puces grâce à l'attribut type.

<UL type=circle>
<LI>Ligne 1</LI>
<LI>Ligne 2</LI>
</UL>

Résultat :

Testez ce code pour voir les puces circulaires.

L'attribut type accepte trois valeurs :

• disc : puce pleine (par défaut)
• circle : puce circulaire vide
• square : puce carrée

Comment créer des listes de définitions avec DL, DT et DD

Les listes de définitions permettent d'associer des termes à leurs définitions. On utilise :

• <DL></DL> pour délimiter la liste
• <DT></DT> pour définir le terme
• <DD></DD> pour donner sa définition

Exemple de liste de définitions

<DL>
<DT>Terme 1</DT>
<DD>Définition 1</DD>
<DT>Terme 2</DT>
<DD>Définition 2</DD>
</DL>

Résultat :

Copiez-collez le code pour tester les listes de définitions.