Façon correcte de faire une liste imbriquée HTML?

Question

Le W3 docs ont une liste imbriquée exemple, précédé de la mention "DÉCONSEILLÉ EXEMPLE:" - mais ils n'ont jamais corrigé avec un non-déconseillé exemple, ni expliqué exactement quel est le problème avec l'exemple. Donc, je suis de gauche, vous demandez-vous, laquelle de ces deux méthodes est la plus correcte, la façon d'écrire une liste HTML?

Option 1: (le sous - <ul> est un enfant de la mère <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>

Ou option 2: (le sous - <ul> est un enfant de l' <li> il appartient)

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

Answer 1

L'Option 2 est correcte. La liste imbriquée doit être à l'intérieur d'un <li> élément de la liste dans laquelle il est imbriqué.

Edit:

Voici un lien vers le W3C Wiki sur les Listes (prises de commentaire ci-dessous): Listes HTML Wiki.

Voici un lien vers le HTML 5 W3C ul spec: HTML5 ul. Note qu'un élément ul peut contenir zéro ou plusieurs li éléments. La même chose s'applique à HTML5 ol. La liste des descriptions (HTML5 dl) est similaire, mais permet à la fois de dt et dd éléments.

Answer 2

Option 2

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

Imbrication des listes - UL

Answer 3

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

Answer 4

Je préfère l'option deux parce qu'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.

Answer 5

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>