The HTML Hierarchy: Thinking Inside the Box
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
<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
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 —
<em> — are siblings and are each a child of the
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