A veces, tendrá que crear contornos u otros tipos de datos complejos en sus páginas HTML5. Fácilmente puede anidar listas dentro de unos a otros, si lo desea. Se puede ver una lista más complejo que describe los nombres populares del gato en los EE.UU. y Australia.

En este ejemplo se utiliza una combinación de listas para hacer su trabajo. Esta contiene una lista de dos países: los EE.UU. y Australia. Cada país tiene un encabezamiento H3 y otra lista (ordenada) en su interior. Puede anidar varios elementos dentro de una lista, pero hay que hacerlo con cuidado si desea que la página a validar.

En este ejemplo, hay una lista desordenada con sólo dos elementos. Cada uno de estos elementos contiene un título y una lista ordenada. La página se ocupa de todos estos datos de una manera relativamente limpia y valida correctamente.

El ejemplo de la lista anidada

El código completo para nestedList.html se reproduce aquí:

Listas anidadas
Nombres populares del gato
Estados Unidos
Tigger
Tigre
Max
Smokey
Sam
Australia
Oscar
Max
Tigre
Sam
brumoso

Aquí hay algunas cosas que usted puede notar en este listado de código:

Hay un gran conjunto que rodea toda la lista principal.

Cómo sangrar el código

Usted puede haber notado que el código HTML es por lo general una sangría. Los navegadores ignoran toda la sangría, pero aún así es un hábito de codificación importante.

Hay muchas opiniones sobre cómo el código debe tener el formato, pero el formato estándar, serán muy útiles hasta que desarrolle su propio estilo.

En general, las siguientes reglas se aplican al código HTML guión:

• Sangría cada elemento anidado. Porque el la etiqueta está dentro de la elemento, se puede aplicar una sangría para indicar esto. Asimismo, el

• elementos siempre están sangrados dentro de

o pares.

• Alinear sus elementos. Si un elemento ocupa más de una línea, la línea de la etiqueta de cierre con la etiqueta de inicio. De esta manera, usted sabe lo que termina qué.

• Utilice espacios, no fichas. El carácter de tabulación a menudo causa problemas en el código fuente. Diferentes pestañas formato editores de manera diferente, y una mezcla de tabuladores y espacios pueden hacer que su página cuidadosamente con formato muy mal cuando lo ve en otro editor.

  La mayoría de los editores tienen la capacidad de interpretar la tecla de tabulación como espacios. Es una gran idea para encontrar esta función en el editor y encenderlo, por lo que cualquier vez que se pulsa la tecla de tabulación, se interpreta como espacios. En Komodo Edit, esto se hace en Editar &# 10154- Preferencias &# 10154- Editor &# 10154- sangría.

• Utilizar dos espacios. La mayoría de los codificadores utilizan dos o cuatro espacios por nivel de sangría. elementos HTML pueden anidarse muy profundamente. Yendo siete u ocho capas de profundidad es común. Si utiliza pestañas o demasiados espacios, tendrá mucho espacio en blanco que no se puede ver el código.

• Terminar en el margen izquierdo. Si termina la página y que no esté de vuelta en el margen izquierdo, se le ha olvidado poner fin a algo. sangrado adecuado hace ver a su organización de la página fácil. Cada elemento debe estar alineado con su etiqueta de cierre.

¿Cómo construir una lista anidada

Cuando se mira sobre el código de la lista anidada, puede parecer intimidante, pero no es realmente tan difícil. El secreto es la construcción de la lista de fuera hacia dentro:

1. Crear la lista externa en primer lugar.

   Construir la lista primaria (ya sea ordenada o desordenada). En el ejemplo, no había originalmente sólo la lista desordenada con los dos países en el mismo.

2. Añadir elementos de la lista de la lista externa.

   Video: Curso de HTML y CSS #38 - Listas: Listas anidadas

   Si desea que el texto o los titulares de la lista más grande, puede ponerlos aquí. Si usted está poniendo nada más que una lista dentro de su lista primaria, es posible que desee poner algunas etiquetas de marcador de posición allí sólo para que pueda ser trabajo seguro del todo.

3. Validar antes de añadir el siguiente nivel de lista.

   listas anidadas pueden confundir al validador (y usted). Validar su código con la lista externa para asegurarse de que no hay problemas antes de agregar listas internas.

4. Añadir la primera lista interna.

   Después de conocer la estructura básica está bien, añadir la primera lista de interiores. Para el ejemplo, esta fue la lista ordenada de nombres de gatos en los EE.UU.

5. Repita hasta que termine.

   Mantenga la adición de las listas hasta que su página se ve bien.

6. Validar con frecuencia.

   Video: 04 - tutorial formulario html 5 y css3 | crear una select list

   Es mucho mejor para validar la marcha que esperar hasta que todo esté terminado. Coger sus errores antes para que no se replican ellos.