¿La forma correcta de hacer una lista anidada en HTML?

Question

Los documentos W3 tienen un nested list example con el prefijo DEPRECATED EXAMPLE:, pero nunca lo corrigieron con un ejemplo no desaprobado, ni explicaron exactamente lo que 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 un hijo de la matriz <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 un hijo de la <li> que pertenece en

<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

La opción 2 es correcta.

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

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

Enlace a la especificación HTML5 W3C ul: HTML5 ul. Tenga en cuenta que un elemento ul puede contener exactamente cero o más elementos li. Lo mismo se aplica al HTML5 ol. La lista de descripciones (HTML5 dl) es similar, pero permite los elementos dt y dd.

Más Notas:

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

Answer 2

Opción 2

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

Nesting Lists - UL

Answer 3

prefiero la segunda opción, ya que muestra claramente el elemento de la lista como el poseedor de esa lista anidada. Siempre me inclino por HTML semánticamente sólido.

Answer 4

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

Answer 5

¿Ha pensado en utilizar el TAG "dt" en lugar de "ul" para las listas de anidamiento? Es heredar el estilo y la estructura que 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> 

Answer 6

opción 2 es correcta: El anidada <ul> es un hijo de la <li> que pertenece en

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

---

correcta: <ul> como elemento secundario de <li>

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

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

---

W3C estándar para Nesting Lists

Un elemento de la lista puede contener otra lista entera - esto se conoce como "anidamiento" una lista. Es útil para cosas como tablas de contenido, como el que está en el comienzo de este artículo:

1. Capítulo Uno
   1. Sección Uno
   2. Sección Segunda
   3. Sección Tres
2. Capítulo Dos
3. Capítulo tres

La clave para las listas de anidamiento 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 ve algo como 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> 

Nota cómo la lista anidada se inicia después de la <li> y el texto del elemento que contiene la lista (“Capítulo Uno”); luego termina antes del </li> del elemento de la lista que 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 resultar confuso anidar listas demasiado a fondo. Para listas muy grandes, es mejor dividir el contenido en varias listas con encabezados, o incluso dividirlo en páginas separadas.

Answer 7

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

Esto no debería importar si controlas el contenido/CSS, pero si estás creando un editor de texto enriquecido, es útil.

Por ejemplo, Gmail, bandeja de entrada, y Evernote Todas permiten crear listas de esta manera:

Con la opción 2 no se puede debido a que (usted tendrá un elemento de la lista adicional), con la opción 1 , usted puede.