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>

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).

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

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.

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

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.

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>

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:

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.