Document Hierarchy Revisited

This week, we will build on our knowledge of selectors by examining advanced selectors. Then we move on to Inheritance and the Cascade. Inheritance determines how a descendant element inherits properties from its ancestors. The Cascade describes how multiple style sheets interact, and the criteria that determine which declaration 'wins' if multiple rules exist for the same selector.

Understanding document hierarchy is essential to taking full advantage of advanced selectors and for grasping the concept of inheritance. Let's take a moment to review some concepts of document hierarchy.

Document Hierarchy

In week 1 I explained how XHTML markup creates a structural hierarchy of tags. If you only have a vague recollection of what the document hierarchy is, now is a good time to review Document Hierarchy from week 1 before you continue on.

As I explained in week 1, the document hierarchy can be represented in two forms: like a family tree; or like an outline, as represented by the DOM Inspector.

Let's take the following markup as an example:

<html>
   <body>
      <h1>A
         <em>Document Hierarchy</em>
         example</h1>
      <p>
         This example demonstrates
         <b>document hierarchy.</b>
      </p>
      <div id="genericBlock">This DIV
         <span>has
            <i>multiple</i>
            levels of tags
         </span>
         in the paragraph content.
      </div>
   </body>
</html>

Family Tree Representation

family tree view of the document hierarchy The document hierarchy for the above markup can be represented as a family tree as displayed on the right:

From the family tree representation, it's easy to see that the root of the tree is the HTML tag, which represents the document.

Below this is the BODY tag, which represents the document body. The BODY is the root of the visible document structure.

Immediately below the BODY are three children: a H1 tag, a P tag and a DIV tag. Children are elements that are one level below an element. Thus, the BODY tag is a parent of the H1, P and DIV tags.

In this markup, H1, P, and DIV are siblings. That is, they all share the same parent. Though the EM tag, B tag and SPAN tag are at the same level of hierarchy, they are not siblings because they do not share the same parent.

Finally, the BODY is an ancestor of all of the elements below it. Conversely, all of the elements below the BODY tag are descendants of the BODY tag. Similarly, the I tag is a descendant of the DIV tag.

Outline Representation

document hierarchy viewed in DOM Inspector
enlarge

Unfortunately, there isn't a tool to display the document hierarchy as a family tree. Fortunately, you can use the DOM Inspector to examine the document hierarchy. Click on the image snippet to the left to view the DOM Inspector's representation of the document hierarchy for the above markup.

Using this outline representation, it is also easy to see that the HTML element is a parent of the BODY tag, which is a parent of the H1, P, and DIV elements, and so on .... (for now, ignore the #text nodes and focus on the nodes that match the tags in the example markup).

The DOM Inspector is a powerful tool for examining and debugging web pages. I will demonstrate the DOM Inspector later in the lecture when we continue our discussion about web development tools.

Meanwhile, if this all makes sense to you (smile), you are ready to dive into advanced selectors! Read on ...