Comment créer des listes imbriquées pour la programmation HTML5 et CSS3 - dummies

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

Cet exemple utilise une combinaison de listes pour effectuer son travail. Celui-ci contient une liste de deux pays: les États-Unis et l'Australie. Chaque pays a un en-tête H3 et une autre liste (ordonnée) à l'intérieur. Vous pouvez imbriquer divers éléments dans une liste, mais vous devez le faire avec précaution si vous souhaitez que la page soit validée.

Dans cet exemple, il existe une liste non ordonnée avec seulement deux éléments. Chacun de ces éléments contient un en-tête et une liste ordonnée. La page gère toutes ces données d'une manière relativement propre et valide correctement.

Exemple de liste imbriquée

Code entier pour nestedList. html est reproduit ici:

nestedList. html

Listes imbriquées

Noms de chats populaires


États-Unis

Tigger
Tigre
Max
Smokey
Sam



Australie

Oscar
Max > Tiger
Sam
Misty
Voici quelques points que vous pouvez remarquer dans cette liste de codes:

Il y a un grand ensemble

• entourant toute la liste principale.

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

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

  • Chaque pays a un élément

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

    .

    Chaque pays a également un

    ensemble avec une liste de noms.

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

    1. Comment mettre en retrait votre code

  Vous avez peut-être remarqué que le code HTML est généralement indenté. Les navigateurs ignorent toute indentation, mais c'est toujours une habitude de codage importante.

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

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

  Indente chaque élément imbriqué.

  • Parce que l'étiquette est à l'intérieur de l'élément, vous pouvez indenter pour l'indiquer. De même, les éléments sont toujours indentés dans les paires

  • ou
    .
    Alignez vos éléments.

    1. Si un élément occupe plus d'une ligne, alignez la balise de fin avec la balise de début. De cette façon, vous savez ce qui finit quoi. Utilisez des espaces, pas des onglets.

    2. Le caractère de tabulation provoque souvent des problèmes dans le code source. Différents éditeurs mettent en forme les onglets différemment, et un mélange d'onglets et d'espaces peut rendre votre page soigneusement mise en page si vous l'affichez dans un autre éditeur. La plupart des éditeurs ont la possibilité d'interpréter la clé de tabulation comme des espaces.C'est une excellente idée de trouver cette fonctionnalité dans votre éditeur et de l'activer, de sorte que chaque fois que vous appuyez sur la touche de tabulation, elle est interprétée comme des espaces. Dans Komodo Edit, vous le faites dans Edition ➪ Préférences ➪ Éditeur ➪ Indentation.

       Utilisez deux espaces.

    3. La plupart des codeurs utilisent deux ou quatre espaces par niveau d'indentation. Les éléments HTML peuvent être imbriqués assez profondément. Aller sept ou huit couches de profondeur est commun. Si vous utilisez des onglets ou trop d'espaces, vous aurez tellement d'espace blanc que vous ne pourrez pas voir le code. Fin à la marge de gauche.

    4. Si vous avez terminé la page et que vous n'êtes pas revenu à la marge de gauche, vous avez oublié de terminer quelque chose. Une indentation correcte permet de voir facilement l'organisation de votre page. Chaque élément doit s'aligner avec sa balise de fermeture. Comment créer une liste imbriquée

    Lorsque vous regardez le code de la liste imbriquée, cela peut paraître intimidant, mais ce n'est pas si difficile. Le secret est de construire la liste

    à l'extérieur dans: Créez d'abord la liste externe.

    1. Construire la liste primaire (qu'elle soit ordonnée ou non). Dans l'exemple, il n'y avait à l'origine que la liste non ordonnée avec les deux pays.

       Ajouter des éléments de liste à la liste externe.

    2. Si vous voulez du texte ou des titres dans la liste plus grande, vous pouvez les mettre ici. Si vous ne mettez rien d'autre qu'une liste à l'intérieur de votre liste principale, vous voudrez peut-être y ajouter des balises d'espace réservé pour être sûr que tout fonctionne.

       Validez avant d'ajouter le niveau de liste suivant.

    3. Les listes imbriquées peuvent perturber 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.

       Ajouter la première liste intérieure.

    4. Une fois que vous savez que la structure de base est correcte, ajoutez la première liste intérieure. Pour l'exemple, il s'agissait de la liste ordonnée des noms de chats dans l'U. S.

       Répéter jusqu'à la fin.

    5. Continuez à ajouter des listes jusqu'à ce que votre page semble correcte.

       Validez fréquemment.

    6. Il vaut mieux valider au fur et à mesure que d'attendre que tout soit fini. Attrapez vos erreurs tôt afin que vous ne les reproduisiez pas.