Listas dentro de Listas en HTML, Anidando Listas

Volviendo con los Tutoriales HTML, en esta entrada aprenderemos a Anidar Listas HTML, en otras palabras crearemos listas dentro de otras listas, ya sea listas ordenadas dentro de listas Desordenadas o Viceversa, de esta forma podemos tener una mejor organización de contenidos en base a listas dentro de Listas, para entenderlo mejor sigamos con los ejemplos y la codificación de estos...

Anidando Listas en HTML:

Bueno para empezar con este Tutorial, tenemos que ya saber crear listas HTML tanto desordenadas como Ordenadas, si aun no tienes idea de como generar estas Listas, te invito a visitar: Crear Listas Ordenadas en HTML y Crear Listas Desordenadas en HTML.

Ahora empezaremos a generar una lista dentro de una Lista:

Lista Desordenada dentro de Una Lista Ordenada:

La idea para Generar una lista dentro de Otra lista, es de tener una lista General y dentro de Cada elemento de esta lista colocar otra Lista, teniendo así como elemento de la lista General otro lista:

Código HTML:

<ol> <li>Matematica <ul> <li>Aritmetica</li> <li> Geometria</li> </ul> </li> <li>Historia <ul> <li>Antigua</li> <li>Moderna</li> </ul> </li> </ol>

Si se pusieron a observar el codigo, pueden darse cuenta que dentro de los elemento de la lista Ordenada General o mayor, creamos una Lista desordenada con sus respectivos elementos, al ejecutar ese codigo tendremos el siguiente resultado:

Resultado:

1. Matemática
   • Aritmética
   • Geometría
2. Historia
   • Antigua
   • Moderna

De esta forma podemos generar una Lista Jerárquica y así poder organizar mejor los aspectos informativos manteniendo un Orden de los Datos.

Lista Ordenada dentro de Una Lista Desordenada:

De la misma forma que el ejemplo anterior podemos crear esta ves una Lista Ordenada dentro de Una Lista Desordenada, invirtiendo los papeles de las etiquetas <ul> y <ol>:

Código:

<ul> <li>Matematica <ol> <li>Aritmetica</li> <li> Geometria</li> </ol> </li> <li>Historia <ol> <li>Antigua</li> <li>Moderna</li> </ol> </li> </ul>

Resultado:

• Matemática
  1. Aritmética
  2. Geometría
• Historia
1. Antigua
2. Moderna

De esta forma invertimos el papel de las listas y tendremos un resultado invertido al anterior, espero que vaya quedando claro el concepto de anidar listas o comúnmente conocido como Listas dentro de Listas.

Como ultimo ejemplo generaremos 3 Listas  que estén anidadas entre si.

3 Listas HTML anidadas entre si:

Para generar este tipo de listas tenemos que basarnos en los conceptos anteriores de ir creando una lista en los elementos de la lista mayor y así sucesivamente:

Código HTML:

<ul> <li>Matematica <ol> <li>Aritmetica <ul> <li>MCM</li> <li>MCD</li> </ul> </li> <li> Geometria</li> </ol> </li> <li>Historia <ol> <li>Antigua <ul> <li>Egipto</li> <li>Mesopotami</li> </ul> </li> <li>Moderna</li> </ol> </li> </ul>

Resultado:

• Matemática
  1. Aritmética
     • MCM
     • MCD
  2. Geometría
• Historia
  1. Antigua
     • Egipto
     • Mesopotamia
  2. Moderna

De esta forma basándonos en el mismo criterio podemos Anidar 3 listas, siendo ya una forma mas jerárquica de Ordenar la información que Poseemos!

Espero que este Tutorial sea de mucha utilidad para ustedes, cualquier duda o Aporte Hacerlo por Comentarios. Gracias por su Tiempo!. 

¿Tienes alguna otra idea de que mas podemos realizar con las listas HTML? compártela!!