Crear listas anidadas en HTML

Introduciremos métodos adecuados para crear listas anidadas en HTML.

Crear listas anidadas en HTML

Podemos crear una lista ordenada con la etiqueta ol y una lista desordenada con la etiqueta ul. Dentro de estas etiquetas, usamos la etiqueta li para crear la lista de elementos.

Habrá casos en los que tengamos que hacer una lista de elementos dentro de otra lista de elementos. Esta estructura de lista se denomina lista anidada y, en este artículo, exploraremos la forma correcta de escribir una lista anidada.

La estructura de la lista desordenada es la siguiente.

<ul>
 <li> Item 1 </li>
 <li> Item 2 </li>
 <li> Item 3 </li> 
</ul> 

Supongamos que tenemos que agregar algunos elementos de la lista debajo del Elemento 1. En tal escenario, deberíamos usar la etiqueta ul dentro de la etiqueta particular li. Luego, podemos escribir la lista de elementos dentro de la etiqueta ul usando las etiquetas li.

Por ejemplo, cree una etiqueta ul y cree tres etiquetas li dentro de la etiqueta ul. Escriba los textos Dogs, Cats y Hamster dentro de las etiquetas li como se muestra a continuación en el ejemplo.

Dentro de la primera etiqueta li, cree una etiqueta ul. Cree dos etiquetas li dentro de las etiquetas ul y escriba los elementos de la lista como Siberian Husky y German Shepherd.

Esta es la forma correcta de escribir listas anidadas en HTML.

Código de ejemplo:

<ul>
 <li> Dogs 
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 </li>
 
 <li> Cats </li>
 <li> Hamster </li> 
</ul> 

Al crear una lista anidada, debemos evitar escribir la etiqueta ul anidada después de cerrar las etiquetas li. Esta práctica no implica listas anidadas.

La práctica incorrecta de escribir una lista anidada se muestra a continuación.

<ul>
 <li> Dogs </li>
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 <li> Cats </li>
 <li> Hamsters </li> 
</ul> 

Hemos cerrado la etiqueta li de la lista de elementos Dog antes de escribir las sublistas. Luego, creamos una etiqueta ul para agregar las sublistas.

Aunque el resultado parece el mismo en los dos ejemplos anteriores, debemos seguir el primer enfoque. Debemos asegurarnos de que la etiqueta ul sea hija de la etiqueta li a la que pertenece.

Por lo tanto, podemos escribir correctamente listas anidadas en HTML.