Hello, Fellow Readers! 👋
In the article HTML for Beginners (Spanish version here), 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.
In the article HTML Tag Attributes (Spanish version here), we learned about HTML tag attributes. We also got to write some tag attributes and see them in action!
So this article is going to be about HTML Tag Nesting (Spanish version here).
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.
I assume that 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
Nested tags must be in proper order so HTML documents are 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 following tag to close.
Remember the Matryoshka doll we appreciated earlier?
Let’s imagine that the upper half of the Matryoshka doll is an opening tag, and the lower half of the Matryoshka doll is the closing tag. When you separate both parts, there is another doll inside, right?
Following the Matryoshka doll analogy, the doll inside the outermost doll represents the content inside HTML tags. Let’s assume that I confused the upper half of the outer Matryoshka doll with the lower half of the content. The Matryoshka doll most likely will not go back to its original state because the parts do not fit correctly.
Something similar happens with tags incorrectly nested.
Improper HTML Tag nesting will cause a visual design page break due to the browser’s incapability to render (read) tags that are out of place. Other errors may occur.
Practice Time!
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>Another question!
Can you figure out how many nested tags are inside the “body” tag (<body></body>)?
Answers: The “title” tag (<title> </title>) is incorrectly nested. Also, there are 2 nested tags inside the “body” tag: the “h3” tag (<h3></h3>) and the button tag (<button></button>).
Got it !?
Fantastic if you did. If not, you tried, so you should 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 style, marked by the opening tag and by the closing tag.
To learn more about attributes, you can check out HTML: Tag Attributes.
Thanks for reading.
You can get a new post notification directly to your email by signing up at the following link.
Related Articles
The following CTRL-Y articles are related somewhat to this post. You may want to check them out!:
- A Morning in a Front End Developer’s Mac Terminal
- HTML for Beginners
- HTML: Tag Attributes
- Resources for Newbie Web Coders
- HTTP Status Puerto Rico
- Programming Language: The General Parts
- What is the Rendering Engine?
- Learn to Code: Lowering the Programming Pedestal
By the Way – A playlist for you
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! For not knowing about this punk band before, I feel I have been missing out. I am very into their dark synth-pop vibe. They have inspired me to go back into messing with my drum pad.