Cómo hacer listas anidadas en HTML

En muchas ocasiones, cuando quieres hacer una lista en HTML, necesitas ordenar los conceptos y subconceptos que quieres explicar. Es decir, quieres hacer listas dentro de listas. A este concepto se le llama en lenguaje HTML listas anidadas. Si quieres conocer cómo hacer este tipo de listas, estás en el lugar correcto.

¡Embarca en la nave de HTML Masters que despegamos!

¿Qué son las listas anidadas en HTML?

Como comentaba, las listas anidadas son listas dentro de listas. Una como, por ejemplo, la del índice de contenidos de esta misma entrada. En esa lista puedes observar como existen conceptos y subconceptos que quedan completamente ordenados gracias a esta lista anidada.

Pero esta no es la única manera de realizar listas anidadas en HTML. ¡Conoce con nosotros todas las posibilidades de este tipo de listas para que las explotes cuando escribas tus contenidos lo máximo posible!

Tipos de listas

Las listas anidadas en HTML pueden tener dos estilos:

See the Pen Untitled by HTML Masters (@htmlmasters) on CodePen.

Listas numeradas anidadas

La manera más habitual de hacer las listas anidadas es de manera ordenada con números. Para ello, debemos aplicar las etiquetas <ol> y <li>, tal y como haríamos en cualquier lista ordenada. Sin embargo, para poder crear una lista anidada, deberemos añadir un inicio de lista (con la etiqueta <ol> tras cualquier item de la lista «madre».

Puedes ver un ejemplo de lista ordenada anidada en el siguiente código:

<ol> 
   <li>Deportes de equipo</li>
      <ol>
         <li>Fútbol</li>
         <li>Baloncesto</li>
         <li>Balonmano</li>
      </ol>
   <li>Deportes individuales</li>
      <ol>
         <li>Tenis</li>
         <li>Boxeo</li>
      </ol>
</ol>

Recuerda que cada lista tiene su numeración propia, aunque los dígitos también se pueden modificar a letras o números romanos, gracias al atributo ‘type’.

Listas desordenadas anidadas

Esta misma manera de realizar listas anidadas se puede replicar también con listas desordenadas. Para ello, deberás utilizar la etiqueta de estas listas, <ul>, en vez de la utilizada anteriormente. De esta manera, esta lista anidada quedará organizada con puntos, y no con números.

<ul> 
   <li>Deportes de equipo</li>
      <ul>
         <li>Fútbol</li>
         <li>Baloncesto</li>
         <li>Balonmano</li>
      </ul>
   <li>Deportes individuales</li>
      <ul>
         <li>Tenis</li>
         <li>Boxeo</li>
      </ul>
</ul>

Con ambos tipos de listas, ordenadas y desordenadas, podrás realizar las listas anidadas que tanto necesitas para ordenar de manera adecuada tus elementos.

Si pese a estas explicaciones que te he dado durante todo el artículo aún tienes alguna consulta, no dudes en escribirme en comentarios. ¡Seguro que otra persona también comparte esa misma duda y puede resolverla gracias a ti.

¡Hasta el próximo artículo!