Os documentos do W3 têm um exemplo de lista aninhada prefixado por DEPRECATED EXAMPLE:, mas nunca o corrigiram com um exemplo não preterido, nem explicaram exatamente o que há de errado com o exemplo.

Então, qual dessas maneiras é a maneira correta de escrever uma lista HTML?

Opção 1 : o aninhado <ul>é filho do pai<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>

Opção 2 : o aninhado <ul>é filho do <li>qual pertence

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

A opção 2 está correta.

A lista aninhada deve estar dentro de um <li>elemento da lista em que está aninhada.

Link para o Wiki do W3C nas listas (extraído do comentário abaixo): HTML Lists Wiki .

Link para a ulespecificação W5C do HTML5ul : HTML5 . Observe que um ulelemento pode conter exatamente zero ou mais lielementos. O mesmo se aplica ao HTML5ol . A lista de descrição ( HTML5dl ) é semelhante, mas permite os elementos dte dd.

Mais notas:

• dl = lista de definições.
• ol = lista ordenada (números).
• ul = lista não ordenada (marcadores).

opção 2

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

Listas de aninhamento - UL

A opção 2 está correta: o aninhado <ul>é um filho do qual <li>ele pertence.

Se você validar , a opção 1 será exibida como um erro no html 5 - crédito: user3272456

Correto: <ul>como filho de<li>

A maneira correta de criar uma lista aninhada HTML é com o aninhado <ul>como filho do <li>qual ele pertence. A lista aninhada deve estar dentro do <li>elemento da lista em que está aninhada.

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

Padrão W3C para listas de aninhamento

Um item da lista pode conter outra lista inteira - isso é conhecido como "aninhando" uma lista. É útil para itens como índices, como o do começo deste artigo:

1. Capítulo um
   1. Seção Um
   2. Seção Dois
   3. Seção Três
2. Capítulo dois
3. Capítulo três

A chave para aninhar listas é lembrar que a lista aninhada deve estar relacionada a um item de lista específico. Para refletir isso no código, a lista aninhada está contida nesse item da lista. O código da lista acima é mais ou menos assim:

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

Observe como a lista aninhada inicia após o <li>e o texto do item da lista que contém ("Capítulo Um"); depois termina antes do </li>item da lista que o contém. As listas aninhadas geralmente formam a base dos menus de navegação do site, pois são uma boa maneira de definir a estrutura hierárquica do site.

Teoricamente, você pode aninhar quantas listas quiser, embora, na prática, possa tornar-se confuso aninhar listas muito profundamente. Para listas muito grandes, é melhor dividir o conteúdo em várias listas com títulos, ou mesmo dividi-lo em páginas separadas.

Se você validar, a opção 1 aparece como um erro no html 5, portanto, a opção 2 está correta.

Prefiro a opção dois porque mostra claramente o item da lista como o possuidor dessa lista aninhada. Eu sempre me inclinaria para o som semanticamente som.

Você já pensou em usar o TAG "dt" em vez de "ul" para aninhar listas? Seu estilo e estrutura herdados permitem que você tenha um título por seção e tabula automaticamente o conteúdo que entra nele.

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

VS

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

O que não é mencionado aqui é que a opção 1 permite aninhar arbitrariamente profundamente as listas.

Isso não importa se você controla o conteúdo / css, mas se estiver criando um editor de rich text, ele será útil.

Por exemplo, gmail, caixa de entrada e evernote permitem a criação de listas como esta:

Com a opção 2, você não pode isso (você terá um item de lista extra); com a opção 1, você pode.