Los documentos W3 tienen un ejemplo de lista anidada con el prefijo DEPRECATED EXAMPLE:, pero nunca lo corrigieron con un ejemplo no obsoleto, ni explicaron exactamente qué está mal con el ejemplo.

Entonces, ¿cuál de estas formas es la forma correcta de escribir una lista HTML?

Opción 1 : el anidado <ul>es hijo del padre<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>

Opción 2 : el anidado <ul>es hijo del <li>que pertenece

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

La opción 2 es correcta.

La lista anidada debe estar dentro de un <li>elemento de la lista en la que está anidada.

Enlace al W3C Wiki en Listas (tomado del comentario a continuación): HTML Lists Wiki .

Enlace a la ulespecificación HTML5 W3C : HTML5ul . Tenga en cuenta que un ulelemento puede contener exactamente cero o más lielementos. Lo mismo se aplica a HTML5ol . La lista de descripción ( HTML5dl ) es similar, pero permite elementos dty ambos dd.

Más notas:

• dl = lista de definiciones.
• ol = lista ordenada (números).
• ul = lista desordenada (viñetas).

opcion 2

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

Listas de anidamiento - UL

La opción 2 es correcta: el anidado <ul>es un hijo del <li>que pertenece.

Si valida , la opción 1 aparece como un error en html 5 - crédito: user3272456

Correcto: <ul>como hijo de<li>

La forma correcta de hacer una lista anidada de HTML es con el anidado <ul>como hijo del <li>al que pertenece. La lista anidada debe estar dentro del <li>elemento de la lista en la que está anidada.

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

Estándar del W3C para listas de anidamiento

Un elemento de la lista puede contener otra lista completa; esto se conoce como "anidar" una lista. Es útil para cosas como tablas de contenido, como la que se encuentra al comienzo de este artículo:

1. Capítulo uno
   1. Seccion uno
   2. Sección dos
   3. Sección tres
2. Capitulo dos
3. Capítulo tres

La clave para anidar listas es recordar que la lista anidada debe relacionarse con un elemento de lista específico. Para reflejar eso en el código, la lista anidada está contenida dentro de ese elemento de la lista. El código de la lista anterior se parece a esto:

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

Tenga en cuenta cómo la lista anidada comienza después de <li>y el texto del elemento de la lista que lo contiene ("Capítulo uno"); luego termina antes del </li>del elemento de la lista que lo contiene. Las listas anidadas a menudo forman la base de los menús de navegación del sitio web, ya que son una buena forma de definir la estructura jerárquica del sitio web.

Teóricamente, puede anidar tantas listas como desee, aunque en la práctica puede ser confuso anidar las listas demasiado profundamente. Para listas muy grandes, es mejor dividir el contenido en varias listas con encabezados, o incluso dividirlo en páginas separadas.

Si valida, la opción 1 aparece como un error en html 5, por lo que la opción 2 es correcta.

Prefiero la opción dos porque muestra claramente el elemento de la lista como el poseedor de esa lista anidada. Siempre me inclinaría por el HTML semántico.

¿Has pensado en usar el TAG "dt" en lugar de "ul" para las listas de anidamiento? Su estilo y estructura heredados le permiten tener un título por sección y tabula automáticamente el contenido que entra.

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

Lo que no se menciona aquí es que la opción 1 le permite anidar de forma arbitraria y profunda las listas.

Esto no debería importar si controla el contenido / css, pero si está haciendo un editor de texto enriquecido, es útil.

Por ejemplo, gmail, inbox y evernote permiten crear listas como esta:

Con la opción 2 no puede hacerlo (tendrá un elemento de lista adicional), con la opción 1, puede hacerlo.