¿Forma correcta de hacer una lista anidada de HTML?


500

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>

Respuestas:


509

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

41
Aquí está la información oficial del W3C, w3.org/wiki/HTML_lists#Nesting_lists , la opción 2 es la forma correcta
Jose Elera

Me encontré con un caso que parece imposible de crear con HTML5 válido: un elemento de lista anidada sin un elemento de lista principal (imagine presionar TAB para sangrar al comienzo de un elemento de lista en un procesador de textos). Vea mi pregunta aquí: stackoverflow.com/questions/61094384/…
Marque el


33

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.


7

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


6

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.


2

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

2
Tus ejemplos no son lo mismo. El segundo ejemplo con "Elección A", "Elección B", "Sub 1", "Sub 2" no funciona para las etiquetas dt/ ddque están emparejadas. Además, el estilo inherente (y la tabulación, sospecho) simplemente proviene de la hoja de estilo predeterminada del navegador, por lo que eso no dice mucho. Lo trataría como un elemento semántico; si tiene una lista de definiciones, o tal vez si solo tiene pares de datos de título / descripción, a dlpodría ser una buena opción.
Ricket

¿Puede editar su comentario para dar ejemplos equivalentes, por ejemplo, para contener la opción A y la opción B con dos entradas secundarias Sub 1 y Sub 2 para la Opción B?
Zlatin Zlatev

-5

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:

lista arbitrariamente anidada

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


2
La opción 1 produce HTML no válido. Hace cinco años, cuando se hizo esta pregunta, puede que ese no haya sido el caso, pero lo es ahora.
j08691

Sí, definitivamente es HTML no válido. Sin embargo, todavía se usa y sigue siendo útil para la compatibilidad. La alternativa es jugar con márgenes y estilos de viñetas que pueden no ser lo que desea al redactar un correo electrónico.
ibash

1
No estoy seguro de entender por qué querría algo desalineado como esto. ¿Puedes editar tu comentario para darle un uso más significativo a esto?
Zlatin Zlatev

Es importante destacar que esto permite la edición gratuita de formularios para un grupo de viñetas, dándole una sensación más intuitiva. Como usuario, si tengo una lista de viñetas, es posible que desee sangrarlas y anidarlas bajo una nueva viñeta. Sin la capacidad de sangrar arbitrariamente, el usuario primero necesitaría insertar la viñeta de encabezado y luego sangrar cada viñeta después. Con la capacidad de sangrar arbitrariamente, el usuario puede sangrar el grupo de viñetas y luego insertar una nueva viñeta de encabezado.
ibash
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.