Imbriquer des balises HTML

L'imbrication correcte des balises HTML évite les erreurs HTML

Si vous regardez le HTML balisage pour toute 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 n'importe quelle page Web aujourd'hui.

Qu'est-ce que cela signifie d'imbriquer des balises HTML ?

La façon la plus simple de comprendre l'imbrication est de penser à Balises HTML sous forme de boîtes contenant votre contenu. Votre contenu peut inclure du texte, des images et des médias connexes. Les balises HTML sont les cases entourant le 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 à l'intérieur d'un paragraphe, vous aurez deux Éléments HTML ainsi que le texte lui-même.

|__+_|

C'est ce texte 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 seconde case (la fort paire de balises), qui rend ce mot en gras.

Lorsque vous imbriquez des balises, fermez les balises dans l'ordre inverse de leur ouverture. Vous ouvrez le

d'abord, suivi de la , 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 à 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 contenante.

Ajouter plus de balises imbriquées

Et si vous ne vouliez 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 aussi.

Vous pouvez voir que notre boîte extérieure, la

, contient désormais deux balises imbriquées : la et le . Ils doivent tous deux être fermés avant que la boîte contenant puisse être fermée.

|__+_|

Exemple : Il s'agit d'un phrase de texte et il a aussi quelques texte en italique aussi.

Ceci est un autre paragraphe.

Dans ce cas, nous avons des boîtes à l'intérieur des boîtes ! La case la plus à l'extérieur est la

ou un division . À l'intérieur de cette boîte se trouvent une paire de balises de paragraphe , et à l'intérieur du premier paragraphe, nous avons un prochain 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 des balises imbriquées de manière cohérente dans le document afin qu'il puisse indiquer où les styles commencent et se terminent. 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 aussi.

C'estun 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 :

|__+_|

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 casser l'apparence visuelle d'une page si les navigateurs ne savent pas comment afficher correctement une page car les éléments HTML et les balises sont hors de propos.

Enfin, si vous vous efforcez d'écrire du code HTML complètement correct et valide, vous devrez utiliser une imbrication correcte. Sinon, chaque validateur signalera votre code HTML comme incorrect.