HTML Hierarchy Tree: A Learning Journey to Web Development
Hey folks! How’s your hacking going? So far we’ve learned about HTML Tags and HTML file structure. Today, we will expand our learning horizon a little bit more by learning about HTML hierarchy tree. HTML hierarchy tree may not feel extremely useful while coding in plain HTML, But it’ll play a crucial role while doing CSS. So, hold tight and enjoy the lesson. It’ll be short and sweet!
This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
An HTML document is constructed with a lot of element members, just like we see in our family. We can compare HTML elements with our family members. In our family, we have parent, child, siblings, ancestor, and descendant etc. We have all those in an HTML document as well.
HTML Nesting
As we’ve already learned, HTML tags can be nested into other HTML tags. And that is what gives it the ability to form an HTML hierarchy tree. When we nest one HTML tag into another one, the tag that is nested inside is called the child element of the prior tag. And as you may have guessed, the tag that has another tag nested inside is called parent tag. Let’s see a little bit of code to make it clear.
<p>Yesterday is history; tomorrow is a mystery. Today is a gift, which is why we call it the <strong>present.</strong></p>The output will be this: Yesterday is history; tomorrow is a mystery. Today is a gift, which is why we call it the present.
Here, the <strong> tag is nested inside the <p> tag. So, according to what we have discussed, <strong> is the child of <p> tag and vice versa.
Big Family of HTML
This looks extremely simple. But like big families, HTML hierarchy tree can get much more complex. Let’s see one example.
<body> <h1>Quotes</h1> <p>I love beautiful quotes! Quote inspires, motivates and sometime makes us think. Below is one of my favorite quotes:</p> <p><blockquotes>Instead of wondering when your next vacation is, maybe you should set up a life you don't need to <strong>escape</strong> from.</blockquotes> - Seth Godin </p></body>
In this example, we see the <body> tag contains all other tags. Every tag nested under <body> is child of <body>. So, <body> have 3 child. One <h1> and two <p>. As these 3 elements are from the same parent, they are called siblings. If you notice, you’ll see that these children also have children. We can refer to those children as the grandchild of <body>. Just like we do in real life.
Now, The second <p> tag contains a <blockquote> tag as a child. <blockquote> is a child of <p> while <p> still is a child of <body>. So, <p> here is the parent of <blockquote> and <body> is grand parent. And again, these little <blockquote> tag also have a child! It’s the <strong> tag. So, <blockquote> is a parent here while the <p> tag is grand parent and <body> tag is grand grand parent!
Things are getting messy, right? As you see can see, this can keep on going and we can have childs of childs of chillds of childs of child. So, to make things easier, instead of calling the root element grand grand grand grand…….grand parent, we simply call it ancestor element. And we call deep level child as descendant elements of the ancestor. A descendant elements can be ancestor of others.
Real world HTML Hierarchy Tree
Compared to a real world web page, the example we’ve discussed is still pretty simple. To take things to the extreme, review this basic HTML page we’ve created in the last post and try to figure out all the parents, childs, siblings, ancestor, descendants etc. This is your homework today.
That’s it for today. We will learn about some very important HTML tags and their uses in the next post. If you have any confusion about any point, feel free to comment and I’ll try to get back to you ASAP. Don’t forget to share this on your social networks.
Live to the fullest and I’ll see you soon! :)
