Nesting HTML Tags

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.

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