Nesting

---

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:”

    This is my sentence of text.

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:

    This is my sentence of text.

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

   

This is my sentence of text.

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.