Nesting HTML Tags

How to Nest HTML Tags Correctly

HTML code on computer screen
Denis Belyaevskiy/iStock

If you look at the HTML markup for any webpage today, you will see HTML elements contained within other HTML elements. These elements that are "inside" of other are what are known as "nested elements", and they are essential to building any web page today.

What Does It Mean to Nest HTML Tags?

The easiest way to understand nesting is to think of HTML tags as boxes that hold your content. Your content can include text, images, etc.

HTML tags are the boxes around the content. Sometimes, you need to places boxes inside of other boxes. Those "inner" boxes are nested inside of others.

If you have a block of text that you want bold inside a paragraph, you'll have two HTML elements as well as the text itself.

Example: This is a sentence of text.

That text is what we will use as our example.  Here is how it would be written.

<p>Example: This is a sentence of text.</p>

Because you want the word "sentence" to be bold, you add opening and closing bold tags before and after that worod.

<p>Example: This is a <strong>sentence</strong> of text.</p>

As you can see, we have one box (the paragraph) which contains the content/text of our sentence, plus a second box (the strong tag pair), which will render that word as bold.

When you nest tags, it is critically important that you close the tags in the opposite order that you opened them. You open the <p> first, followed by the <strong>, which means you reverse that and close the </strong> and then the </p>.

Another way to think about this is to once again use the analogy of boxes. If you place a box inside another box, you have to close the inner one before you can close the outer or containing box.

Adding More Nested Tags

What if you only want one or two words to be bold, and another set to be italic? Here's how to do that.

<p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too.</p>

You can see that our outer box, the <p>, now has two nested tags inside it - the <strong> and the <em>. They must both be closed before that containing box can be closed.

<div>
<p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too.</p>
<p>This is another paragraph.</p>
</div>

In this case we have boxes inside of boxes!  The most out box is the <div> or a "division". Inside that box are a pair of nested paragraph tags, and inside the first paragraph we have a next <strong> and <em> tag pair. Once again, look at any web page today and you will see this and much more nesting happening! This is how pages are built - boxes inside of boxes.

Why Should You Care About Nesting

The number one reason that you should care about nesting is if you're going to use CSS. Cascading Style Sheets rely on tags to be consistently nested within the document so that it can tell where styles begin and end. If you set up a style that should affect all "links that are inside of the division with a class of "main-content"" text on the page, the incorrect nesting makes it hard for the browser to know where to apply these styles.

Let's look at some HTML:

<div class="main-content">
<p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too.</p>
<p>This is <a href="/index.html">another paragraph</a>.</p>
</div>

Using the example I have just stated, if I wanted to write a CSS style that would impact the link inside this division, and only that link (as opposed to any other links in other sections of the page), I would need to use the nesting to write my style, as such:

.main-content a {
   color: #F00;
}

Other reasons include accessibility and browser compatibility. If your HTML is incorrectly nested, it won't be as accessible to screen readers and older browsers - and it could even completely break the visual appearance of a page if the browsers cannot figure out how to properly render a page because HTML elements and tags are out of place.

Finally, if you're striving to write completely correct and valid HTML, you'll need to use correct nesting. Otherwise, every validator will flag your HTML as incorrect.

Original article by Jennier Krynin. Edited by Jeremy Girard on 5/2/17.