Skip to main content

A Beginner's Guide to CSS | Part Five - The Document Tree

Submitted by helen on Wednesday, April 17, 2013 - 22:04; Modified on Thursday, August 18, 2016 - 11:13

Before we progress with CSS, you need to learn about a little thing called the document tree. The document tree describes the hierarchy of an (X)HTML page and is important to learn because you'll need some grasp on how the elements you're working with relate to each other.

The Document Tree in HTML5

Here is a basic HTML5 page, with each element of the document tree explained below.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Document</title>
</head>
<body>
  <header>
    <h1>My Document Home</h1>
    <nav>
      <ul>
        <li><a href="/home" title="Home">Home</a></li>
        <li><a href="/about" title="About">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>My Document Sub-heading</h2>
    <p>Main content.</p>
  </main>
  <footer>
    <nav>
      <ul>
        <li><a href="/home" title="Home">Home</a></li>
        <li><a href="/about" title="About">About</a></li>
      </ul>
    </nav>
    <p>Copyright © 2016 Alternate Gateways</p>
  </footer>
</body>
</html>

The Document Tree in XHTML 1.0 Strict

Here is a basic XHTML 1.0 Strict page, with each element of the document tree explained below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
  <div id="header">
    <h1>My Document Home</h1>    
    <ul>
      <li><a href="/home" title="Home">Home</a></li>
      <li><a href="/about" title="About">About</a></li>
    </ul>    
  </div>
  <div id="main">
    <h2>My Document Sub-heading</h2>
    <p>Main content.</p>
  </div>
  <div id="footer">
    <ul>
      <li><a href="/home" title="Home">Home</a></li>
      <li><a href="/about" title="About">About</a></li>
    </ul>
    <p>Copyright © 2016 Alternate Gateways</p>
  </div>
</body>
</html>

Differences between the two examples

Just a note on the differences between the two examples. You may have noticed that the HTML example utilises elements that are also descriptive entities, such as header, nav, main and footer, whereas these elements do not exist in XHTML. The best we can do in XHTML is to use the ID attribute to designate an element's purpose, but this does not offer the same level of meaning.

Parent Elements

The parent element is the element which directly contains an element.

HTML5 example parent elements

Let's find the parent elements in our HTML example:

  • html is the parent of head and body.
  • head is the parent of title and meta.
  • body is the parent of header, main and footer.
  • header is the parent of h1 and nav.
  • nav is the parent of ul.
  • ul is the parent of the two lis.
  • Each li is the parent of its a.
  • main is the parent of h2 and p.
  • footer is the parent of nav and p.
  • nav is the parent of ul
  • ul is the parent of the two lis
  • Each li is the parent of its a.

XHTML example parent elements

Now, let's find the parent elements in out XHTML example:

  • html is the parent of head and body.
  • head is the parent of title and meta.
  • body is the parent of div id="header", div id="main" and div id="footer".
  • div id="header" is the parent of h1 and ul.
  • ul is the parent of the two lis.
  • Each li is the parent of its a.
  • div id="main" is the parent of h2 and p.
  • div id="footer" is the parent of ul and p.
  • ul is the parent of the two lis
  • Each li is the parent of its a.

Child Elements

The child element is an element directly inside another element.

HTML5 example child elements

Let's see how this relates to our document tree example above.

  • head and body are the children of html.
  • title and meta are the children of head.
  • header, main and footer are the children of body.
  • h1 and nav are the children of header.
  • ul is the child of nav.
  • The two lis are the children of ul.
  • The two as are each children of their containing li.
  • h2 and p are the children of main.
  • nav and p are the children of footer.
  • ul is the child of nav.
  • The two lis are the children of ul.
  • The two as are each children of their containing li.

XHTML example child elements

  • head and body are the children of html.
  • title and meta are the children of head.
  • div id ="header", div id="main" and div id="footer" are the children of body.
  • h1 and ul are the children of div id="header".
  • The two lis are the children of ul.
  • The two as are each children of their containing li.
  • h2 and p are the children of div id="main".
  • ul and p are the children of footer.
  • The two lis are the children of ul.
  • The two as are each children of their containing li.

Ancestor Elements

An ancestor element sits above the parent element in the hierarchical document structure and can be one or many levels above.

HTML5 example ancestor elements

Below are the ancestor elements in our HTML5 document tree example.

  • html is the ancestor of all of the elements inside it, including parents and their children.
  • body is the ancestor of all of the elements inside it, including parents and their children.
  • header is the ancestor of the ul, its lis and their as'.
  • nav is the ancestor of the lis and their a's.
  • footer is the ancestor of the ul, its lis and their as'.
  • nav is the ancestor of the lis and their a's.

XHTML example ancestor elements

Below are the ancestor elements in our XHTML document tree example.

  • html is the ancestor of all of the elements inside it, including parents and their children.
  • body is the ancestor of all of the elements inside it, including parents and their children.
  • div id="header" is the ancestor of the lis and their as'.
  • footer is the ancestor of the lis and their as'.

Descendant Elements

A descendant element is an element within an element, within an element. A descendant is to an ancestor what a child is to a parent. All of the elements inside an element are referred to as its ancestors, regardless of how deep down they may be. I won't list the descendants for our examples here, because it's fairly obvious.

Sibling Elements

A sibling element is an element next to another element. List-items are siblings, two paragraphs next to each other are siblings, etc. I won't provide a more complex example, as I'm sure you get the idea: an element next to another element is its sibling.

HTML5 example sibling elements

Below are the siblings from our HTML5 document tree example:

  • head and body are siblings.
  • title and meta are siblings.
  • header, main and footer are siblings.
  • The h1 and nav within header are siblings.
  • The two li tags within header and footer are siblings.
  • The h2 and p within main are siblings.
  • The nav and p within footer are siblings.

HTML5 example sibling elements

Below are the siblings from our XHTML document tree example:

  • head and body are siblings.
  • title and meta are siblings.
  • div id="header", div id="main" and div id="footer" are siblings.
  • The h1 and nav within div id="header" are siblings.
  • The two li tags within div id="header" and div id="footer" are siblings.
  • The h2 and p tags within div id="main" are siblings.
  • The nav and p tags within div id="footer" are siblings.

Conclusion

That was a quick overview of the document tree. Knowing how the document tree is constructed helps when applying units of measurement to elements, such as percentages and ems, and when using the CSS selectors. In the next instalment I will go over the CSS units of measurement with you. This has been the last text-heavy lesson. After that, there tutorials will feature a lot more examples...and will be a lot more fun, I promise!