Understanding the HTML hierarchy

             When you are new to web development and have just started dirtying your hands with HTML code it is very important to understand the html hierarchy to proceed further.



Understanding the HTML hierarchy will help us to write better CSS and JS functions. HTML hierarchy can be compared to our family hierarchy where we have great grandparents, grandparents, parents, siblings and on. In an HTML hierarchy we have ancestors, descendants, parent, child, siblings and on.
<div>
<h1>My First Title</h1>                 
<p>My first paragraph</p>                  
       <p>My second <a>paragraph</a></p>
</div>

Our div contains a header tag, and two paragraph tags and an anchor tag. Here the div is to be considered as the root element as you have your great grandfather of your family. All the other elements are descendants of the div tag. 

A child is the direct descendant of the parent.  Here, paragraph is one of the childs of the div but anchor is not the child of the div tag.

In this example, let us consider the anchor tag when you traverse up this tree every element we pass through till the top are ancestors of the starting element. To find the descendants we come down the tree.

The other relationship between the elements is siblings. Like you and your brother elements which share the same parent are siblings. Here paragraph tags are siblings as they are sharing the same parent div. Anchor tag does not have any siblings as it is the only child of paragraph tag.