Les éléments HTML ont des relations définies avec les autres éléments d'un document HTML.
Parent et enfants
Un élément qui contient un autre élément est le parent du second élément.
Considérons le document html suivant :
<!DOCTYPE HTML>
<html>
<head>
<!-- les métadonnées vont ici -->
<title>Titre du document</title>
</head>
<body>
<!-- le contenu et les balises vont ici -->
J'aime la <strong>Programmation Web</strong>.
</body>
</html>
L'élément body est le parent de l'élément strong, car l'élément strong est contenu entre les balises ouvrante et fermante de l'élément body.
Inversement, l'élément strong est un enfant de l'élément body.
Un élément peut avoir plusieurs enfants, mais un seul parent.
Descendants
Les éléments peuvent contenir des éléments qui, à leur tour, contiennent d'autres éléments.
Par exemple, l'élément html contient l'élément body, qui contient l'élément strong.
Les éléments body et strong sont des descendants de l'élément html, mais seul l'élément body est un enfant de l'élément html.
Les enfants sont des descendants directs.
Les éléments qui partagent le même parent sont appelés frères ou sœurs.
Frères ou sœurs
Dans l'exemple ci-dessus, les éléments head et body sont frères ou sœurs car ils sont tous deux enfants de l'élément html.
Remarque
L'importance de la relation entre les éléments traverse le langage HTML.
Les éléments HTML ont des restrictions quant aux autres éléments qui peuvent être leurs parents ou leurs enfants.
Ces restrictions sont exprimées par les types d'éléments.
Les relations entre éléments sont également essentielles en CSS.
L'une des façons de sélectionner les éléments auxquels appliquer des styles est par le biais de leurs relations parents/enfants.
Enfin, le Document Object Model (DOM) permet de trouver des éléments spécifiques dans un document en naviguant dans l'arbre du document, qui est une représentation des relations entre les éléments.
