2.4 Hiérarchie HTML

<p>
  Sir <strong>Alex Ferguson</strong> a dit un jour à propos de Filipo Inzaghi : <q>Ce garçon doit être né hors-jeu.</q>.
</p>

Dans cette proposition :

• la balise <strong>  donne aux mots “Alex Ferguson” plus d’importance
• la balise <q> marque la citation sur Inzaghi

Le fait que la balise <strong> soit restitué (à l’écran) en gras est lié à un comportement par défaut des navigateurs.
N’oubliez pas que vous devez choisir des éléments HTML en fonction de leur signification et non de leur apparence.

Dans cette proposition :

• <p> est l’élément parent de <strong> et <q>
• <strong> et <q> sont les éléments enfants de <p>
• <strong> et <q> sont des éléments frères.

Ordre

Le fonctionnement de la nidification dépend de l’emplacement des balises d’ouverture et de fermeture.

Comme un élément HTML comprend une balise d’ouverture, une balise de fermeture et tout le reste, un élément enfant doit être fermé avant de fermer l’élément parent.

<!-- Ce code comporte des erreurs :-( -->
<p>
  Ce bout de code HTML "ne fonctionnera pas" parce que la balise "strong" s'ouvre ici <strong> mais se ferme après le paragraphe.
</p></strong>

Étant donné que <strong> a été ouvert après le <p> (et est donc considéré comme un enfant de <p>), l’élément <strong> doit être fermé avant son parent <p>.

<!-- Ce code ne comporte pas d'erreur :-) -->
<p>
  Ce bout de code HTML "fonctionnera" parce que la balise "strong" s'ouvre ici <strong> et se ferme </strong> correctement.
</p>

Profondeur

Les éléments enfants pouvant eux-mêmes contenir d’autres éléments enfants, il est possible d’écrire une hiérarchie plus profonde dans un document HTML.

Notre paragraphe ci-dessus pourrait faire partie d’un article de blog :

<article>
  <h1>Citations de football célèbres</h1>
  <p>
    Sir <strong>Alex Ferguson<</strong>< a dit un jour à propos de Filipo Inzaghi :<q>Ce garçon doit être né hors-jeu</q>.
  </p>
  <p>
    Lorsque critiqué par John Carew, <strong>Zlatan Ibrahimovic</strong> a répondu : <q>Ce que Carew fait avec un ballon de football, je peux le faire avec une orange</q>.
  </p>
  <p>
    <strong>George Best</strong> dit <q>J'ai dépensé beaucoup d'argent en boissons alcoolisées, en oiseaux et en voitures rapides. Le reste, je l'ai gaspillé</q> lorsqu'on lui pose des questions sur son mode de vie.
  </p>
</article>

Dans cet exemple :

• <article> est l’ancêtre de tous les autres éléments
• <article> est le parent du <h1> et des 3 <p>
• <h1> et les 3 <p> sont frères et sœurs
• chaque <p> est le parent du <strong> et du <q> qu’ils contiennent
• chaque <h1>, <p>, <strong> and <q> sont tous des descendants de <article>

L’analogie de l’arbre généalogique s’applique toujours lors de la traversée de plusieurs couches d’imbrication HTML :

• un descendant de l’élément X est un élément contenu dans X
• un enfant est juste un descendant direct
• un ancêtre de l’élément Y est un élément
• le parent n’est que le premier ancêtre direct
• un frère de l’élément X est un élément qui a le même parent

La nidification des éléments de types block et inline

Les éléments de type block peuvent contenir des éléments de type block ou inline.

Cependant, les éléments inline ne peuvent contenir que d’autres éléments inline – l’élément de lien <a> est la seule exception..

<!-- Ce code comporte des erreurs :-( -->
<strong>
  <p>Vous ne pouvez pas placer un paragraphe dans une balise "strong"</p>
</strong>

Rappelez-vous simplement ancêtre / descendant, parent / enfant et frères et sœurs.
Cette hiérarchie sera utile en CSS.