Parfois, vous aurez envie de créer des contours ou d'autres types de données complexes dans vos pages HTML5. Vous pouvez facilement les listes d'imbriquer les uns des autres, si vous voulez. Vous pouvez voir une liste plus complexe décrivant noms de chat populaires aux États-Unis et en Australie.

Cet exemple utilise une combinaison de listes pour faire son travail. Cette contient une liste de deux pays: les Etats-Unis et en Australie. Chaque pays a une tête de H3 et une autre liste (ordonnée) à l'intérieur. Vous pouvez imbriquer plusieurs éléments à l'intérieur d'une liste, mais vous devez le faire avec soin si vous voulez la page pour valider.

Dans cet exemple, il ya une liste non ordonnée avec seulement deux éléments. Chacun de ces éléments contient un titre et une liste ordonnée. La page gère toutes ces données d'une façon relativement propre et valide correctement.

L'exemple de liste imbriquée

Le code entier pour nestedList.html est reproduit ici:

Listes imbriquées
Cat noms populaires
USA
Tigrou
Tiger
Max
Smokey
Sam
Australie
Oscar
Max
Tiger
Sam
Misty

Voici quelques choses que vous remarquerez peut-être dans cette liste de code:

• Il ya une grande

mettre autour de la totalité de la liste principale.

• La liste principale n'a que deux éléments de la liste.

• Chacun de ces éléments représente un pays.

• Chaque pays dispose d'un

  élément, décrivant le nom du pays à l'intérieur du

• .

• Chaque pays possède également un

  définir une liste de noms.

• 
  
  
  
  

  L'indentation vous aide vraiment à voir comment les choses sont reliées.

Comment mettre en retrait votre code

Vous avez sans doute remarqué que le code HTML est habituellement en retrait. Les navigateurs ignorent tout indentation, mais il est encore une habitude de codage importante.

Il ya beaucoup d'opinions sur la façon dont le code doit être formaté, mais le format standard vous servira bien jusqu'à ce que vous développer votre propre style.

Généralement, les règles suivantes sont appliquées au code HTML tiret:

• Le retrait de chaque élément imbriqué. Parce que le tag est à l'intérieur du élément, vous pouvez mettre en retrait pour l'indiquer. De même, la

• éléments sont toujours en retrait dans

ou
paires.

• Alignez vos éléments. Si un élément prend plus d'une ligne, la ligne jusqu'à la balise de fin avec le balise de début. De cette façon, vous savez ce que se termine ce.

• Utilisez des espaces, pas onglets. Le caractère de tabulation provoque souvent des problèmes dans le code source. Différents onglets de format des éditeurs différemment, et un mélange de tabulations et des espaces peuvent faire votre page regardez attentivement formaté terrible quand vous l'affichez dans un autre éditeur.

  La plupart des éditeurs ont la capacité d'interpréter la touche de tabulation comme des espaces. Il est une excellente idée de trouver cette fonctionnalité sur votre éditeur et allumez-le, de sorte que toute fois que vous frappez la touche de tabulation, il est interprété comme espaces. Dans Komodo Edit, vous faites cela dans Modifier # 10154- Préférences # 10154- éditeur # 10154- indentation.

• Utilisez deux espaces. La plupart des codeurs utilisent deux ou quatre places par niveau d'indentation. Éléments HTML peuvent être imbriquées assez profondément. Going sept ou huit couches profondes est commun. Si vous utilisez les onglets ou trop nombreux espaces, vous aurez tellement l'espace blanc que vous ne pouvez pas voir le code.

• Fin à la marge de gauche. Si vous terminez la page et vous n'êtes pas de retour à la marge de gauche, vous avez oublié de mettre fin à quelque chose. Indentation correcte permet de voir votre organisation page facile. Chaque élément doit être aligné avec sa balise de fermeture.

Comment construire une liste imbriquée

Lorsque vous regardez sur le code de la liste imbriquée, il peut paraître intimidant, mais il est pas vraiment difficile. Le secret est de construire la liste dehors dans:

1. Créez la liste extérieure en premier.

   Construire la liste primaire (si elle est ordonnée ou non). Dans l'exemple, il était à l'origine juste la liste non ordonnée avec les deux pays en elle.

2. Ajouter des éléments de liste à la liste extérieure.

   Si vous souhaitez que le texte ou les gros titres dans la liste plus grande, vous pouvez les mettre ici. Si vous n'êtes rien mettre, mais une liste dans votre liste principale, vous pouvez mettre des balises d'espace réservé là-bas juste pour que vous pouvez être le travail de sorte que tout.

3. Valider avant d'ajouter le niveau suivant de la liste.

   Listes imbriquées peuvent confondre le validateur (et vous). Validez votre code avec la liste externe pour vous assurer qu'il n'y a pas de problèmes avant d'ajouter des listes internes.

4. Ajouter la première liste intérieure.

   Après vous connaissez la structure de base est correct, ajouter la première liste intérieure. Pour l'exemple, ce fut la liste ordonnée de noms de chats aux Etats-Unis

5. Répétez jusqu'à ce que vous avez terminé.

   Continuez à ajouter des listes jusqu'à ce que votre page ressemble à droite.

6. Valider fréquemment.

   Il est beaucoup mieux pour valider que vous allez plutôt que d'attendre jusqu'à ce que tout est fini. Attrapez vos erreurs au début afin de ne pas les reproduire.