Hello, Fellow Readers! 👋
In the article HTML for Beginners, we learned that the Hypertext Markup Language (HTML) is a language for web documents. Also, HTML has a tag structure that denotes elements on the web document, and we even saw how HTML tags look on the browser.
Also, in the article HTML: Tag Attributes, we learned about HTML tag attributes. Also, we coded some tag attributes and got to see how they in action!
So this article is going to be about HTML Tag Nesting.
But before starting, let’s appreciate the Matryoshka doll gif for a second.
What is HTML Tag Nesting?
When I read HTML tag nesting for the first time, I instantly thought about a bird nest.
And probably the concept came from the fact that nests are “containers” (contain an item, or eggs). So keep that in mind when you continue reading.
Like we learned on HTML for Beginners about HTML structure, a simple HTML element denotation consisted of:
- Opening Tag
- Content inside Tags
- Closing Tag
<p>My cat eats a lot.</p> (1) (2) (3)
On HTML: Tag Attributes, the HTML tag structure was more complex.
<html> <head> <title>Today is the day</title> </head> <body> <h3>Let's write machine!<h3> <button>Let's Go!</button> </body> </html>
There are tags inside tags.
A tag inside a tag is HTML Tag Nesting.
How to Nest a Tag, Correctly
Tags must be nested in proper order so HTML documents can be accessible to screen readers and be compatible with most browsers.
What is the proper order to nest a tag you ask?
The tag opened most recently is always the next tag to close.
Remember the Matryoshka doll we appreciated earlier?
Let’s imagine that the upper half of the doll is an opening tag and the lower half of the doll is the closing tag. When you separate both parts, there is another doll inside, right?
To continue with the analogy, the doll that is inside the outermost doll could be seen as the content inside the HTML tags.
Let’s say, I confused the upper half of the outermost doll with the lower half of the content. The doll most likely will not go back to its original state because the parts do not fit correctly.
Something similar happens if tags are nested incorrectly.
Improper HTML Tag nesting most probably will cause a visual design page break due to browser’s incapability to render (read) tags that are out of place. Other errors may occur.
Can you follow the proper order if we go back to the complex tag nesting example? Can you identify if there is any improper HTML tag nesting?
<html> <head> <title>Today is the day</head> </title> <body> <h3>Let's write machine!<h3> <button>Let's Go!</button> </body> </html>
Can you figure out how many tags are nested in the body tag?
Answers: The title tag is not properly nested and there are 2 tags nested on the body tag.
Got it !?
Awesome if you did… if not… you tried so celebrate too!
Why HTML Nesting is Important?
Other than to avoid visual webpage errors, HTML nesting is used for CSS (Cascading Style Sheets).
When tags are nested, CSS relies on the HTML attributes classes and id to identify where to apply the beginning of the style (marked by the opening tag) and end of the style (marked by the closing tag).
To learn more about attributes, you can check out HTML: Tag Attributes.
By the Way
This post was written while listening to Boy Harsher Radio generated by Spotify. I was introduced to this band earlier this year, and I cannot get enough of them! I feel like I have been missing out so much for not knowing about this band. I am very into their dark synth-pop vibe. They definitely have inspired me to go back into messing with my drum pad.