The HTML Hierarchy: Thinking Inside the Box

By Lee Underwood

Relationship flow chart

A Note About Relationships

As we look at the structure of the page we will see that each element is related to another element. This is called a parent-child-sibling relationship. An element that is directly above another element in the hierarchy is called the parent of the element below it. The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings. The hierarchy of our diagram from the previous page is shown at the right. As you can see, it looks like a "document tree." In CSS these relationships are further defined but this is enough for our purposes. Right now we are only looking at the structure of the document.

Dissecting the Diagram

(In order to see what we are discussing, I've included a popup link for the graphic shown on the previous page which you can access here. You can drag it around the screen or switch between it and this window.)

If you look at the graphic in its entirety you will see that each element seems to overlay the previous element. (I added the shadows for effect.) That's because each element is "contained" within the previous element, so they're called "containers."

The opening and closing <html></html> elements form the foundation ("background") upon which the rest of the document is built. It's known as the root element. Next we have two main sections which lay on top of that: the <head> and <body> sections. Within the <head> section each item (i.e., meta tags, scripts) is equal to the other. There is no hierarchy of elements within this section. Within the <body> section, however, every element is linked in the hierarchy in one form or another.

In our diagram the <body> element is the parent of the <h1> element and the two <div> elements. Each of these elements is a child of the <body> element.

View Rendered Source plugin

If we look within the first <div> we can see that the <p> element is a child of the <div> element, making the <div> a parent of the <p> element. The two elements within the <p> element — <strong> and <em> — are siblings and are each a child of the <p> element.

I could go on but I think you get the idea. Each element is related to the other elements above and below it.

View Rendered Source

A good method to use when viewing the structure that we just discussed is the Firefox plugin, "View Rendered Source," by Jennifer Madden. This plugin works in the same way as the right-click "View Source" but renders the source in the layout shown at right. The plugin will also show all JavaScript and XML code. Jennifer explains the procedure in her excellent article, "What Is Rendered Source?"


Remember, a Web page is more than a collection of code and text. It has a structure that, once understood, can be manipulated, as is the case when using JavaScript and the Document Object Model (DOM).

Page 2 of 2

Previous Page
1 2

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date