Header Ads

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:




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:




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:




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







1 comentario:

  1. Me parece muy bien este tutorial pero tengo una duda a ver si me la puedes resolver.
    ¿Es posible anidar listas ordenadas manteniendo el orden jerarquico?

    ResponderEliminar