Sachez que l'imbrication correcte des balises HTML a comme importance majeure d'éviter les erreurs HTML.
Si vous regardez le balisage HTML de n'importe quelle page Web aujourd'hui, vous verrez des éléments HTML contenus dans d'autres éléments HTML. Ces éléments qui sont «à l'intérieur» d'autres éléments sont appelés éléments imbriqués , et ils sont essentiels à la création de toute page Web aujourd'hui.
Qu'est-ce que cela signifie pour imbriquer des balises HTML?
Le moyen le plus simple de comprendre l'imbrication est de considérer les balises HTML comme des boîtes contenant votre contenu. Votre contenu peut inclure du texte, des images et des médias associés. Les balises HTML sont les boîtes autour du contenu. Parfois, vous devez placer des boîtes à l'intérieur d'autres boîtes. Ces boîtes "intérieures" sont imbriquées à l'intérieur des autres.
Si vous avez un bloc de texte que vous voulez en gras dans un paragraphe, vous aurez deux éléments HTML ainsi que le texte lui-même.
Exemple: Ceci est une phrase de texte.
Ce texte est ce que nous utiliserons comme exemple. Voici comment cela serait écrit en HTML:
Exemple: Ceci est une phrase de texte.
Pour rendre la phrase de mot en gras, ajoutez des balises d'ouverture et de fermeture avant et après ce mot.
Exemple: Ceci est une phrase de texte.
Comme vous pouvez le voir, nous avons une boîte (le paragraphe) qui contient le contenu de la phrase, plus une deuxième boîte (la paire d'étiquettes fortes ), qui rend ce mot en gras.
Lorsque vous imbriquez des balises, fermez les balises dans l'ordre inverse dans lequel vous les avez ouvertes. Vous ouvrez le
d'abord, suivi du , ce qui signifie que vous inversez cela et fermez le , puis le
Une autre façon de penser à cela est d'utiliser à nouveau l'analogie des boîtes. Si vous placez une boîte dans une autre boîte, vous devez fermer la boîte intérieure avant de pouvoir fermer la boîte extérieure ou contenant.
Ajout d'autres balises imbriquées
Que faire si vous ne voulez qu'un ou deux mots en gras et un autre en italique ? Voici comment faire cela.
Exemple: Ceci est une phrase de texte et il y a aussi du texte en italique .
Vous pouvez voir que notre boîte extérieure, le
, a maintenant deux balises imbriquées à l'intérieur: le et le . Ils doivent tous deux être fermés avant que la boîte contenant ne puisse être fermée.
Exemple: Ceci est une phrase de texte et il y a aussi du texte en italique .
Ceci est un autre paragraphe.
Dans ce cas, nous avons des boîtes à l'intérieur des boîtes! La boîte la plus externe est le
ou une division . À l'intérieur de cette boîte se trouvent une paire de balises de paragraphe imbriquées , et à l'intérieur du premier paragraphe, nous avons une paire de balises suivante et .
Pourquoi devriez-vous vous soucier de la nidification
La raison n ° 1 pour laquelle vous devriez vous soucier de l'imbrication est si vous allez utiliser CSS. Les feuilles de style en cascade reposent sur des balises pour être systématiquement imbriquées dans le document afin qu'il puisse dire où les styles commencent et se terminent. Une imbrication incorrecte empêche le navigateur de savoir où appliquer ces styles. Regardons du HTML:
Exemple: Ceci est une phrase de texte et il y a aussi du texte en italique .
Ceci est un autre paragraphe .
En utilisant l'exemple ci-dessus, si nous voulions écrire un style CSS qui affecterait le lien à l'intérieur de cette division, et uniquement ce lien (par opposition à tout autre lien dans d'autres sections de la page), nous aurions besoin d'utiliser l'imbrication pour écrire ce style, en tant que tel:
.main-content a {
couleur: # F00;
}
autres considérations
L'accessibilité et la compatibilité du navigateur sont également importantes. Si votre code HTML n'est pas correctement imbriqué, il ne sera pas aussi accessible aux lecteurs d'écran et aux navigateurs plus anciens - et il pourrait même complètement briser l'apparence visuelle d'une page si les navigateurs ne peuvent pas comprendre comment rendre correctement une page parce que les éléments HTML et les balises sont hors de propos.
Enfin, si vous vous efforcez d'écrire du HTML complètement correct et valide, vous devrez utiliser une imbrication correcte. Sinon, chaque validateur marquera votre HTML comme incorrect.
