Nesting HTML Tags

Correctly nesting HTML tags prevents HTML errors

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 elements are known as nested elements, and they are essential to building any webpage 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, and related media. 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 in HTML:

Example: This is a sentence of text.

To make the word sentence bold, add opening and closing tags before and after that word.

Example: This is a sentence of text.

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

When you nest tags, close the tags in the opposite order that you opened them. You open the

first, followed by the , which means you reverse that and close the and then the

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.

Example: This is a sentence of text and it also has some italicized text too.

You can see that our outer box, the

, now has two nested tags inside it—the and the . They must both be closed before that containing box can be closed.


Example: This is a sentence of text and it also has some italicized text too.


This is another paragraph.


In this case, we have boxes inside of boxes! The outermost box is the

or a division. Inside that box are a pair of nested paragraph tags, and inside the first paragraph, we have a next and tag pair.

Why Should You Care About Nesting

The No. 1 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. Incorrect nesting makes it hard for the browser to know where to apply these styles. Let's look at some HTML:



Example: This is a sentence of text and it also has some italicized text too.


This is another paragraph.


Using the example above, if we wanted to write a CSS style that would affect the link inside this division, and only that link (as opposed to any other links in other sections of the page), we would need to use the nesting to write this style, as such:

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

Other Considerations

Accessibility and browser compatibility matters, too. 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Nesting HTML Tags." ThoughtCo, Apr. 5, 2023, thoughtco.com/nesting-html-tags-3466475. Kyrnin, Jennifer. (2023, April 5). Nesting HTML Tags. Retrieved from https://www.thoughtco.com/nesting-html-tags-3466475 Kyrnin, Jennifer. "Nesting HTML Tags." ThoughtCo. https://www.thoughtco.com/nesting-html-tags-3466475 (accessed March 29, 2024).