Impressum

Arbre du document et degré de parenté des éléments

Extrait du code source de la page CSS Zen Garden
mardi 4 janvier 2005
par  François Daniel Giezendanner
popularité : 1%

Selon la définition, l’arbre du document c’est l’arbre des éléments qui résulte du formatage du document source. Chacun de ces éléments a exactement un seul parent, l’exception étant l’élément racine qui n’en a pas.

Pour illustrer ce fait, considérons la hiérarchie des balises HTML de la page de CSS Zen Garden - The beauty of CSS design (version française : Jardin Zen CSS. La beauté de la conception CSS)

En voici un extrait purgé de son texte et de ses classes CSS, y inclus quelques simplifications. Nous observons d’emblée une hiérarchie arborescente des balises.

Relevez le fait que cette page est entièrement construite avec les balises div, span, p, a, h1, h2 et h3. Pour les aspects de hiérarchie arborescente des balises que nous discutons ici, l’extrait de ce code ci-dessous est suffisant :

Et voici son arbre :

GIF - 7.6 ko

Arborescence et degré de parenté des éléments

Généalogie : Lien de parenté qui lie deux individus

En matière de généalogie, la parenté entre deux individus peut se définir de différentes façons, soit par une désignation spécifique soit en terme de « degré » en comptabilisant le nombre de générations qui les sépare. Ainsi on parle couramment soit d’ancêtres, parents, enfants, ascendants (aïeux = grands-parents, bisaïeux = arrières grands-parents, trisaïeux = …), descendants, collatéraux (adjacents), …soit de troisième génération,…Pour plus d’information sur ce vocabulaire, on se référera par exemple à : Dénominations des liens de parentés et Désignation usuelle des parents, la filiation, les degrés de parenté

Application au cas de l’arbre des éléments html

La comparaison avec la généalogie traditionnelle (biologique) doit être faite en tenant compte du fait restrictif qu’en html chacun des éléments a exactement un seul parent (et non pas deux), l’exception étant l’élément racine qui n’en a pas.

Dans notre exemple, on trouve par exemples les relations :

  • Les éléments div(3), div(4) et div(5) sont toutes trois les enfants de l’élément div(2).
  • l’élément div(2) est le parent des éléments div(3), div(4) et div(5).
  • Les éléments div(3), div(4), div(5), h1, h2, span, p, span etc sont des descendants de l’élément div(2).
  • L’élément div(2) est un ancêtre des éléments div(3), div(4), div(5), h1, h2, span, p, span etc.
  • Les éléments h1 et h2 sont les enfants de l’élément div(3). L’élément div(3) est le parent des éléments h1 et h2.
  • L’élément h1 n’est pas un enfant de l’élément div(2), c’est un petit-enfant ou un descendant.
  • Les éléments div(3), div(4) et div(5) sont adjacents.

GIF - 7.6 ko

Relevons que dans la référence ci-dessous le W3C ne définit que les termes

  • ancêtre,
  • descendant,
  • enfant et
  • frère.

De plus, il définit les termes :

  • élément précédent : On dit que l’élément A est l’élément précédent de B,
    • si (1) A est un ancêtre de B ou
    • si (2) A est un frère précédent de B.
  • élément suivant : On dit que l’élément A est l’élément suivant de B, si et seulement si B est un élément précédent de A.

Ces deux notions seront traitées plus loin.


Référence :


Publications

Derniers articles publiés

Navigation

Articles de la rubrique

Agenda

<<

2018

 

<<

Juin

 

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
2526272829301
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


1 site référencé dans ce secteur