Listes imbriquées
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 14 sur 60.
Vous pouvez placer une liste à l'intérieur d'une autre — c'est ce qu'on appelle une liste imbriquée. C'est utile pour créer des structures hiérarchiques, telles que des plans ou des menus à plusieurs niveaux.
Pour créer une liste imbriquée, il vous suffit de placer un élément <ul> ou <ol> à l'intérieur d'un élément <i><li></i> d'une autre liste.
Voici un exemple de liste non ordonnée imbriquée :
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Le deuxième élément contient une liste imbriquée avec deux sous-éléments. Dans le navigateur, cela s'affichera comme ceci :
- Élément 1
- Élément 2
- Sous-élément 2.1
- Sous-élément 2.2
- Élément 3
Vous pouvez également imbriquer des listes ordonnées ou mélanger les deux.
Défi
FacileCréez un document HTML avec une liste imbriquée. La liste devrait ressembler à ceci :
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
Aide-mémoire
Une liste imbriquée est créée en plaçant un élément <ul> ou <ol> à l'intérieur d'un élément <li> d'une autre liste :
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Vous pouvez imbriquer des listes ordonnées ou mélanger des listes ordonnées et non ordonnées les unes dans les autres.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page