1. Technology

Nesting HTML Tags

How to Use Multiple HTML Tags on One Block of Text


Most introductory HTML pages will tell you that you should nest your HTML tags properly. But typically, the instruction is meager. I'm guilty of this even on this Web site. My definition of nesting reads:

Placing one element inside another. When two tags are opened, they must be closed in the reverse order.

But what does that mean?

What Does it Mean to “Nest” HTML Tags?

The easiest way to understand nesting is to think of your HTML tags as little baskets (or nests) holding your content (or eggs). When you purchase eggs at a supermarket, they typically come in a container—the egg carton. Then the checker places that carton in a bag, and then that bag is placed in your vehicle to get home.

The eggs are your HTML content, such as text or images. And each container is an HTML tag around that text. You cannot put the eggs halfway into the carton and then into the bag—this physically doesn't work. But you can write your HTML so that the tags are opened but not closed around the text.

If you have a block of text that you want bold, italic, and inside a paragraph, you'll have 3 HTML elements and the text itself.

This is my sentence of text.

The sentence of text is your “eggs.” Since you want the whole sentence to be bold, you would make that tag your “egg carton:”

<b>This is my sentence of text.</b>

As you can see, the B tags surround the entire block of text, so the entire sentence will be bold. Then you want the sentence to be italics too, so that tag would be the “bag” holding the carton:

<i><b>This is my sentence of text.</b></i>

The italics tags completely surround the bold tags and the sentence. The final container is the paragraph or “vehicle:”

<p><i><b>This is my sentence of text.</b></i></p>

When you nest tags, you close the tags in the opposite order that you opened them. Reading from left to right, the tags are opened: P, I, B. So when you need to close them you need to close them in reverse order: B, I, P.

What If I Don't Want the Entire Sentence Bold?

It's easy to understand nesting when you have an entire sentence that is bold or italic, but what if you only want one or two words to be bold, and another set to be italic? If there is overlap, then you'll need to write the overlapped tag twice:

<p><b>This <i>is</i></b> <i>my sentence</i> of text.</p>

The tags are opened P, B, I; I then B are closed; I is re-opened and then I and P are closed. The nesting is correct.

Most beginning web developers don't like to write their sentences like that, because it seems like you're adding extra tags. Most beginners would write:

<p><b>This <i>is</b> my sentence</i> of text.</p>

The tags are opened: P, B, I, but then they are closed B, I, P—in the wrong order.

While this HTML will work in most browsers, it is not a good habit to get into. It's invalid XHTML and some browsers, especially screen readers and limited devices (like palmtops and cell phones) can get confused by the incorrect nesting.

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 would affect all "bold and italic" text on your page, the incorrect nesting would make it hard for the browser to know where the bold plus italics ended and where the text was just italics.

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.

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

©2014 About.com. All rights reserved.