Comment créer une liste à puces à plusieurs niveaux en HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-06-08 12:41:13

Question

Comment puis-je faire une liste à puces à deux niveaux en HTML ?

Réponse

Pour créer une liste à puces, à plusieurs niveaux, en HTML, vous devez imbriquer des balises <ul>.

Pour rappel l'élément HTML <ul></ul> contient une liste d'éléments exprimés sous la forme de balise <li></li>.

Pour ajouter un second niveau, il suffit d'ajouter un nouvel élément <ul></ul> avec ses éléments <li></li> dans un élément <li></li> du niveau précédent.

Remarque : Vous pouvez imbriquer autant de niveaux que vous voulez.

Voici un exemple pour concevoir une liste à puces à deux niveaux en HTML :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment créer une liste à puces à plusieurs niveaux en HTML ?</title>
</head>  
<body> 
<h2>Une liste à puces à deux niveaux</h2> 
<ul>
<li>Un</li>
<li>Deux
<ul>
<li>Deux un quart</li>
<li>Deux et demi</li>
</ul> 
</li> 
<li>Trois</li>
</ul>
</body>
</html>

Remarque : Si vous voulez plutôt afficher une numérotation à la place des puces, remplacez les balises <ul> et </ul> par <ol> et </ol>.