Créer des listes imbriquées en HTML

Nous présenterons les méthodes appropriées pour créer des listes imbriquées en HTML.

Création de listes imbriquées en HTML

On peut créer une liste ordonnée avec la balise ol et une liste non ordonnée avec la balise ul. A l’intérieur de ces balises, nous utilisons la balise li pour créer la liste des éléments.

Il y aura des cas où nous devrons faire une liste d’éléments à l’intérieur d’une autre liste d’éléments. Une telle structure de liste s’appelle une liste imbriquée, et dans cet article, nous explorerons la bonne manière d’écrire une liste imbriquée.

La structure de la liste non ordonnée est la suivante.

<ul>
 <li> Item 1 </li>
 <li> Item 2 </li>
 <li> Item 3 </li> 
</ul> 

Supposons que nous devions ajouter quelques éléments de liste sous le Item 1. Dans un tel scénario, nous devrions utiliser la balise ul à l’intérieur de la balise li particulière. Ensuite, nous pouvons écrire la liste des éléments à l’intérieur de la balise ul en utilisant les balises li.

Par exemple, créez une balise ul et créez trois balises li à l’intérieur de la balise ul. Écrivez les textes Dogs, Cats et Hamster à l’intérieur des balises li comme indiqué ci-dessous dans l’exemple.

A l’intérieur de la première balise li, créez une balise ul. Créez deux balises li à l’intérieur des balises ul et écrivez les éléments de la liste comme Siberian Husky et German Shepherd.

C’est la bonne façon d’écrire des listes imbriquées en HTML.

Exemple de code :

<ul>
 <li> Dogs 
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 </li>
 
 <li> Cats </li>
 <li> Hamster </li> 
</ul> 

Lors de la création d’une liste imbriquée, il faut éviter d’écrire la balise ul imbriquée après avoir fermé les balises li. Une telle pratique n’implique aucune liste imbriquée.

La mauvaise pratique consistant à écrire une liste imbriquée est illustrée ci-dessous.

<ul>
 <li> Dogs </li>
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 <li> Cats </li>
 <li> Hamsters </li> 
</ul> 

Nous avons fermé la balise li de la liste d’articles Dog avant d’écrire les sous-listes. Ensuite, nous avons créé une balise ul pour ajouter les sous-listes.

Bien que le résultat soit le même dans les deux exemples ci-dessus, nous devons suivre la première approche. Nous devons nous assurer que la balise ul est l’enfant de la balise li à laquelle elle appartient.

Ainsi, nous pouvons correctement écrire des listes imbriquées en HTML.