HTML as Easy as 123

 

Part 3 of the HTML as Easy as Series

HTML as Easy as series intends to explain HTML as easy as possible. Each part of the series is titled after a phrase commonly used by Americans (English that I am familiar with). To do something “… as easy as 123” means to do something easily.

Hello, Fellow Readers! 👋

🎸🎶 Here I go again on my own 🎶 🎸

We’ll… I am not on my own, but that’s the song that comes to mind when I think about the phrase “here I go again”.

So, 🎶here I go again 🎶 with my beloved series HTML as Easy as.

Let’s recap what we have covered so far.

In Part 1 of HTML as Easy as series, we learned that HTML is a hyperlink markup language for web documents, that HTML has a tag structure that denotes elements on the web document, and we even saw how HTML tags look on the browser.

In Part 2 of HTML as Easy as series, we learned about HTML tag attributes. Also, we coded some tag attributes and got to see how them in action!

So this article, Part 3 of HTML as Easy as series, is going to be about HTML Tag Nesting.

But before starting, let’s appreciate the Matryoshka doll gif for a second.

Pin me ☺️

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.

As we learned about the HTML structure on Part 1 of the HTML as Easy as series, a simple HTML element denotation consisted of:

  1. Opening Tag
  2. Content inside Tags
  3. Closing Tag
<p>My cat eats a lot.</p>
(1)        (2)        (3)

Because you continued reading my HTML as Easy as series and your HTML skills have progressed 😎, you may have noticed that in Part 2 HTML tag structure looked a little bit 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>

Notice how 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?

Is simple!

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.

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 one!

Can you figure out how many tags are nested in the body tag?

As always, follow the gifs for the correct answer below!

Just…

I know you know this…

Ready for the answers?

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 Part 2 of HTML as Easy as series.

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.

Pin me ☺️

Leave a Reply

Your email address will not be published. Required fields are marked *