Comment faire une liste imbriquée HTML?

501

Les documents W3 ont un exemple de liste imbriquée préfixé parDEPRECATED EXAMPLE: , mais ils ne l'ont jamais corrigé avec un exemple non obsolète, ni expliqué exactement ce qui ne va pas avec l'exemple.

Alors, laquelle de ces façons est la bonne façon d'écrire une liste HTML?

Option 1 : l'imbriqué <ul>est un enfant du parent<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

Option 2 : l'emboîtement <ul>est un enfant de l' <li>appartenance

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>
Ricket
la source

Réponses:

510

L'option 2 est correcte.

La liste imbriquée doit se trouver dans un <li>élément de la liste dans laquelle elle est imbriquée.

Lien vers le Wiki W3C sur les listes (extrait du commentaire ci-dessous): Wiki des listes HTML .

Lien vers la spécification HTML5 W3C ul: HTML5ul . Notez qu'un ulélément peut contenir exactement zéro ou plusieurs liéléments. La même chose s'applique à HTML5ol . La liste de description ( HTML5dl ) est similaire, mais autorise les éléments dtet dd.

Plus de notes:

  • dl = liste de définitions.
  • ol = liste ordonnée (nombres).
  • ul = liste non ordonnée (puces).
DwB
la source
41
Voici les informations officielles du W3C, w3.org/wiki/HTML_lists#Nesting_lists , l'option 2 est la bonne façon
Jose Elera
J'ai rencontré un cas qui semble impossible à créer avec HTML5 valide: un élément de liste imbriqué sans élément de liste parent (imaginez que vous appuyez sur TAB pour mettre en retrait au début d'un élément de liste dans un traitement de texte). Voir ma question ici: stackoverflow.com/questions/61094384/…
Mark
64

Option 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Listes d'imbrication - UL

csi
la source
33

L'option 2 est correcte: l'imbriqué <ul>est un enfant de <li>celui auquel il appartient.

Si vous validez , l'option 1 apparaît comme une erreur en html 5 - crédit: user3272456


Correct: en <ul>tant qu'enfant de<li>

La bonne façon de créer une liste imbriquée HTML consiste à l'imbriquer en <ul>tant qu'enfant du <li>auquel il appartient. La liste imbriquée doit se trouver à l'intérieur de l' <li>élément de la liste dans laquelle elle est imbriquée.

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

Norme W3C pour les listes d'imbrication

Un élément de liste peut contenir une autre liste entière - c'est ce qu'on appelle «imbriquer» une liste. Il est utile pour des choses comme les tables des matières, comme celle au début de cet article:

  1. Chapitre un
    1. Section un
    2. Section deux
    3. Section trois
  2. Chapitre deux
  3. Chapitre trois

La clé de l'imbrication de listes est de se rappeler que la liste imbriquée doit se rapporter à un élément de liste spécifique. Pour refléter cela dans le code, la liste imbriquée est contenue dans cet élément de liste. Le code de la liste ci-dessus ressemble à ceci:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Notez comment la liste imbriquée commence après le <li>et le texte de l'élément de liste contenant («Chapitre un»); puis se termine avant le </li>de l'élément de liste contenant. Les listes imbriquées constituent souvent la base des menus de navigation du site Web, car elles constituent un bon moyen de définir la structure hiérarchique du site Web.

Théoriquement, vous pouvez imbriquer autant de listes que vous le souhaitez, bien qu'en pratique, il peut devenir déroutant d'imbriquer les listes trop profondément. Pour les très grandes listes, il est préférable de diviser le contenu en plusieurs listes avec des en-têtes, ou même de le diviser en pages distinctes.

Geoffrey Hale
la source
7

Si vous validez, l'option 1 apparaît comme une erreur en html 5, donc l'option 2 est correcte.

user3272456
la source
6

Je préfère l'option deux car elle montre clairement l'élément de liste en tant que possesseur de cette liste imbriquée. Je pencherais toujours vers un HTML sémantiquement sain.

Ken Gregory
la source
2

Avez-vous pensé à utiliser le TAG "dt" au lieu de "ul" pour les listes d'imbrication? Son style et sa structure hérités vous permettent d'avoir un titre par section et il tabule automatiquement le contenu qui s'y trouve.

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

CONTRE

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>
CSSMAN
la source
2
Vos exemples ne sont pas les mêmes. Le deuxième exemple avec "Choix A", "Choix B", "Sub 1", "Sub 2" ne fonctionne pas pour les balises dt/ ddqui sont couplées. De plus, le style inhérent (et la tabulation, je suppose) vient simplement de la feuille de style du navigateur par défaut, donc cela ne dit pas grand-chose. Je le traiterais comme un élément sémantique; si vous avez une liste de définitions, ou peut-être si vous n'avez que des paires de données titre / description, un dlpourrait être un bon choix.
Ricket
Pouvez-vous modifier votre commentaire pour donner des exemples équivalents - par exemple, pour contenir les choix A et B avec deux sous-entrées Sub 1 et Sub 2 pour le choix B?
Zlatin Zlatev
-5

Ce qui n'est pas mentionné ici, c'est que l'option 1 vous permet une imbrication arbitraire en profondeur des listes.

Cela ne devrait pas avoir d'importance si vous contrôlez le contenu / css, mais si vous créez un éditeur de texte riche, il est très pratique.

Par exemple, gmail, boîte de réception et evernote permettent tous de créer des listes comme celle-ci:

liste imbriquée arbitrairement

Avec l'option 2, vous ne pouvez pas le faire (vous aurez un élément de liste supplémentaire), avec l'option 1, vous le pouvez.

ibash
la source
2
L'option 1 produit un code HTML non valide. Il y a cinq ans, lorsque cette question a été posée, ce n'était peut-être pas le cas, mais elle l'est maintenant.
j08691
Oui, c'est définitivement du HTML invalide. Cependant, il est toujours utilisé et est toujours utile pour la compatibilité. L'alternative est de jouer avec les marges et les styles de puces qui peuvent ne pas être ce que vous voulez lorsque vous rédigez un e-mail.
ibash
1
Je ne suis pas sûr de comprendre pourquoi je voudrais quelque chose de mal aligné comme ça. Pouvez-vous modifier votre commentaire pour donner une utilisation plus significative à cela?
Zlatin Zlatev
Il est important de noter que cela permet de modifier le formulaire gratuitement pour un groupe de puces, ce qui lui donne une sensation plus intuitive. En tant qu'utilisateur, si j'ai une liste de puces, je peux vouloir les mettre en retrait et les imbriquer sous une nouvelle puce. Sans la possibilité d'indentation arbitraire, l'utilisateur devrait d'abord insérer la puce d'en-tête, puis indenter chaque puce après. Avec la possibilité de mettre en retrait arbitrairement, l'utilisateur peut mettre en retrait le groupe de puces, puis insérer une nouvelle puce d'en-tête.
ibash