(X)HTML Hierarchy - The Document Tree

All the (X)HTML elements in a document can be represented as a tree structure. The root element is html, within this are the two elements head and body and so on. Here is an example of an HTML document structure:

An element is the parent of another element if it directly contains that element. For example, in the document tree shown, head is the parent of meta. Similarly, an element is the child of another element if is directly contained in that element. For example, in the document tree shown here, head is the child of html.
An ancestor element of an element is one that contains it - indirectly or directly . In the diagram, one of the span element's ancestor elements is div - the span is contained in a p element which is, in turn, contained in the div element.
Similarly, a descendant element of an element is one that is contained in it indirectly or directly. For example, in the document tree shown, h2 is a descendant element of body.
A child is also a descendent and a parent is also an ancestor.