Nesting Tags

Okay, now that you know how to use several different tags, I need to tell you about nesting. Nesting means that when you put several pairs of tags into a document, you must balance each pair of tags, making sure they do not overlap. It is easiest to understand with an example. So here is an example using the emphasis or italics tags, <em></em>, and the strong or bold tags, <strong></strong>:

Incorrect:
<strong> <em> </strong> </em> this end tag is misplaced

Correct:
<strong> <em> </em> </strong>

If you have overlapping tags, then your document will be displayed by the web browser in ways you didn't expect.

Let me give you a more complicated example because this nesting thing is really important. Trust me, it can cause you some major problems later on when you start filling up your document with a whole lot of tags…

Incorrect: <tag 1> <tag 2> <tag 3> </tag 2> </tag 3> this end tag is overlapping </tag 1>

Correct: <tag 1> <tag 2> <tag 3> </tag 3> </tag 2> </tag 1>

As you can see in the second example, you need to put </tag 3> before you put </tag 2>.

Got it? Hope so, because I am ready to start showing you some more cool things that you can do with your text.

This resource originally created by Deborah Dunk.
Revised and edited by Michael Galloway in 2005 & in 2006.