Parents, Children, Descendants and Siblings

Parents, Children, Descendants and Siblings

HTML elements have defined relationships with the other elements in an HTML document. An element that contains another element is the parent of the second element. In program shown, the body element is the parent to the code element, because the code element is contained between the start and end tags of the body element. Conversely, the code element is a child of the body element. An element can have multiple children, but only one parent.

<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
<body>
<!-- content and elements go here -->
I like <code>apples</code> and oranges.
</body>
</html>

Elements can contain elements that, in turn, contain other elements. You can also see this in the program html element contains the body element, which contains the code element. The body and code elements are descendents of the html element, but only the body element is a child of the html element.

Children are direct descendants. Elements that share the same parent are known as siblings. In the program the head and body elements are siblings because they are both children of the html element.