Nesting Elements

To "nest" elements means to put one inside of another. So, for instance, every element in your document's body is nested in the BODY element. Or, as we saw in Graphic Links, IMG elements can be nested into A elements to create Linked Graphics. As another example, you could make text very strongly emphasized by nesting the EM element inside of the STRONG element:

<P>It is <STRONG><EM>highly recommended</EM></STRONG> that you extinguish smoking materials while applying hair spray.</P>
This is rendered as:

It is highly recommended that you extinguish smoking materials while applying hair spray.

The key point to understand about nesting tags is that the ending tag of the inside element must come before the ending tag of the outside element.

This is correct:
<X><Y>Text text text <Z>text</Z> text text</Y> text text text.</X>

This is incorrect:
<X>Text text text <Y>text</X> text text text.<Y>

This is correct:
<B>This is bold; <I>bold and italic;</I></B> <I>and this is just italic.</I>

This is incorrect:
<B>This is bold; <I>bold and italic;</B> and this is just italic.</I>

This last example may give you the result you're looking for... on your browser. It is not guaranteed to work on any other browser, even different versions of the browser you use! Remember, finish the last element you started before you finish any other elements. Validators are very good at catching improperly nested elements.

Of course, there is an exception (isn't there always?) to this rule: Empty elements do not have end tags, so they obviously don't need to be ended before the outside element ends. The page about Graphic Links shows a perfect example. Here is a list of empty elements:

• BR
• HR
• IMG
• INPUT (which we cover in Forms)

Also, Anchors (the A element) cannot be nested:
<A NAME="incorrect!">This is <A HREF="dontdoit.htm">very wrong</A>!</A>

Previous: Images
Next: Comments