0Pricing
HTML Academy · Leçon

Listes imbriquées et style des listes

Imbriquez des listes dans d’autres listes et contrôlez leur apparence.

Listes imbriquées et style des listes est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Imbrication des listes

Les listes peuvent être imbriquées dans des éléments <li> :

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Imbrication correcte

La liste imbriquée doit être inside un élément <li>, et non un enfant direct de <ul> ou <ol> :

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Styles de puces à plusieurs niveaux

Les navigateurs appliquent des puces par défaut différentes à chaque niveau d’imbrication :

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

Réinitialisation avec CSS

Remplacez les styles des listes imbriquées avec CSS :

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Listes imbriquées numérotées

Listes ordonnées imbriquées avec différents types :

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

Compteurs CSS pour une numérotation personnalisée

Numérotation hiérarchique personnalisée avec les compteurs CSS :

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Modèle de navigation en accordéon

Une liste imbriquée peut devenir une navigation latérale extensible :

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

Espacement des listes imbriquées

Contrôlez l’indentation visuelle avec CSS :

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

Rappel du raccourci list-style

Toutes les propriétés de style de liste combinées :

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Icônes personnalisées comme marqueurs de liste

Utilisez SVG ou des émojis comme marqueurs de liste :

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

Accessibilité des listes imbriquées

Listes imbriquées et lecteurs d’écran :

  • Les lecteurs d’écran annoncent le niveau d’imbrication et le nombre d’éléments
  • Une imbrication profonde (4 niveaux ou plus) prête à confusion — limitez-vous à 2 ou 3 niveaux au maximum
  • Si vous utilisez list-style: none sur la liste externe, ajoutez role="list"

Vérification rapide

Où une liste imbriquée doit-elle être placée inside une liste externe ?

Récapitulatif : listes imbriquées

Les notions essentielles des listes imbriquées :

  • Imbriquez les listes dans <li> — jamais directement dans <ul>
  • Par défaut, les navigateurs utilisent : disque → cercle → carré à chaque niveau
  • Les compteurs CSS permettent une numérotation hiérarchique personnalisée
  • Limitez l’imbrication à 2 ou 3 niveaux pour faciliter l’utilisation
  • Utilisez <details>+<summary> pour une navigation imbriquée extensible

Questions Fréquemment Posées

La leçon « Listes imbriquées et style des listes » est-elle gratuite ?

Oui — le texte complet de « Listes imbriquées et style des listes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Listes imbriquées et style des listes » ?

Imbriquez des listes dans d’autres listes et contrôlez leur apparence. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Listes imbriquées et style des listes » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Listes non ordonnées ul et li
  2. Listes ordonnées ol, start, reversed et type
  3. Listes de descriptions dl, dt et dd
  4. Listes imbriquées et style des listes
← Retour à HTML Academy