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. C'est la méthode idéale pour énumérer des points sans ordre précis.

Exemple de liste simple

Voici la structure de base à insérer dans votre fichier HTML :

<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>. Cette technique est très utile pour créer des plans hiérarchiques ou des sous-catégories.

<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. Cela permet de varier le style visuel sans utiliser de CSS.

<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 de manière structurée. Elles sont particulièrement adaptées pour les glossaires ou les descriptions de caractéristiques techniques.

On utilise trois balises spécifiques :

• <DL></DL> pour délimiter la liste de définitions (Definition List)
• <DT></DT> pour définir le terme à expliquer (Definition Term)
• <DD></DD> pour donner sa définition ou sa description (Definition Data)

Exemple de liste de définitions

Voici comment combiner ces trois balises :

<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. Notez que le navigateur applique généralement une mise en retrait automatique à la définition pour la distinguer clairement du terme.