Si vous regardez le HTML balisage pour 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.
Que signifie imbriquer des balises HTML?
La façon la plus simple de comprendre l'imbrication est de penser à Balises HTML comme des boîtes qui contiennent votre contenu. Votre contenu peut inclure du texte, des images et des médias associés. Les balises HTML sont les cases 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 mettre en gras dans un paragraphe, vous en 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 faire le mot phrase gras, ajoutez des balises d'ouverture et de fermeture avant et après ce mot.
Exemple: il s'agit d'un phrase du texte.
Comme vous pouvez le voir, nous avons une case (le paragraphe) qui contient le contenu de la phrase, plus une deuxième case (le fort paire de balises), ce 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 par le , ce qui signifie que vous inversez cela et fermez le et puis le.
Une autre façon d'envisager cela est d'utiliser à nouveau l'analogie des boîtes. Si vous placez une boîte à l'intérieur d'une autre boîte, vous devez fermer la boîte intérieure avant de pouvoir fermer la boîte extérieure ou contenant.
Ajouter plus de balises imbriquées
Et si vous ne voulez qu'un ou deux mots gras, et un autre en italique? Voici comment procéder.
Exemple: il s'agit d'un phrase de texte et il a aussi quelques texte en italique trop.
Vous pouvez voir que notre boîte extérieure, le
, contient maintenant deux balises imbriquées: la et le . Ils doivent tous les deux être fermés avant que cette boîte contenant puisse être fermée.
Exemple: il s'agit d'un phrase de texte et il a aussi quelques texte en italique trop.
Ceci est un autre paragraphe.
Dans ce cas, nous avons des boîtes à l'intérieur des boîtes! La boîte la plus à l'extérieur est la
ou a. division. À l'intérieur de cette boîte se trouvent une paire d'emboîtés. balises de paragraphe, et à l'intérieur du premier paragraphe, nous avons un suivant. et paire de balises.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. Feuilles de style en cascade s'appuyer sur les balises pour être systématiquement imbriquées dans le document afin qu'il puisse indiquer où commencent et se terminent les styles. Une imbrication incorrecte rend difficile pour le navigateur de savoir où appliquer ces styles. Regardons un peu de HTML:
Exemple: il s'agit d'un phrase de texte et il a aussi quelques texte en italique trop.
C'est un autre paragraphe.
En utilisant l'exemple ci-dessus, si nous voulions écrire un Style CSS cela affecterait le lien à l'intérieur de cette division, et seulement 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 cela pourrait même complètement casser le apparence visuelle d'une page si les navigateurs ne peuvent pas comprendre comment afficher correctement une page car les éléments HTML et les balises sont hors de endroit.
Enfin, si vous vous efforcez d'écrire du HTML complètement correct et valide, vous devrez utiliser une imbrication correcte. Sinon, chaque validateur signalera votre code HTML comme incorrect.