Arbre des éléments

L'arbre des éléments d'un document HTML

On peut se représenter l'imbrication des éléments d'un document HTML comme un arbre. On donne plus bas le vocabulaire associé, qu'il est important de mémoriser pour la suite.

Arbre et document HTML

Voici le balisage d'un document HTML auquel on a ôté le texte.


<html>
     <head>

	
	<title>...</title>
	</head>
<body>
 <h1>...<a>...</a>...</h1>
 <h2>...</h2>
 <p><a>...<strong>...</strong>..</a>....<img />...<a>...<img/>...</a>...</p>
 <h2>...</h2>
 <ul>
  <li>...</li>
  <li>...<a>...</a>...</li>
  <li>...</li>
 </ul>
 <h2>...</h2>
 <p>...</p>
</body>
</html>

Seul l'élément html n'est pas imbriqué entre deux autres balises. On mettra cet élément tout en haut de l'arbre. Chaque nœud de l'arbre est un élément du document HTML et porte le nom de la balise correspondante. On met une flèche d'un premier noeud vers un deuxième si le deuxième fait partie du contenu du premier (ses balises sont imbriquées dans celles du premier).

L'arbre ci-dessus décrit donc l'imbrication des balises du document HTML.

Vocabulaire

Ce vocabulaire est analogue à celui de la généalogie. Ce n'est pas bien difficile de s'en souvenir.

Si une flèche va d'un noeud appelé truc vers un noeud appelé machin, on dit que truc est parent de machin, et que machin est enfant de truc.
Si une suite de flèches va d'un noeud appelé truc vers un noeud appelé bidule, on dit que bidule est un descendant de truc, et que truc est un ascendant de bidule.
Enfin, deux noeuds sont frères s'ils ont le même parent. On écrit les frères dans l'arbre de gauche à droite au fur et à mesure de leur apparition dans le code source du document. Le premier frère à droite d'un élément s'appelle son frère adjacent, et tous les frères à droite d'un élément s'appellent ses frères suivants.

Chaque noeud, sauf html, a donc un unique parent. Et chaque noeud peut avoir 0, 1 ou plusieurs enfants.
Les descendants d'un noeud sont ses enfants, leurs enfants s'ils en ont, les enfants de leurs enfants, etc... Les ascendants d'un noeud sont son parent, le parent de son parent, etc... Remarquez que tous les noeuds, sauf html lui-même, sont des descendants de html.

Exemples, dans l'arbre ci-dessus: les deux seuls enfants de html sont head et body, strong est enfant de a mais pas de body (seulement descendant), et strong n'a pas de frère. Les frères suivants de ul sont (dans l'ordre) h2 et p, son frère adjacent est h2 (celui à sa droite, celui à sa gauche ne peut pas être sélectionné à partir de ul pour une question de chronologie).