Best Practices Web Design

Looking for the lessons? Get started!

Why we "nest" tags in HTML.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

Nesting elements can help to logically group sections of a web page together, just as you might do in the real world by placing a selection of small boxes containing similar items inside a larger box. — Ian Lloyd

You can use multiple tags on text strings (i.e. words and phrases). Like so:

<strong><em>Boy, am I emphasized!</em></strong>

which gives you: Boy, am I emphasized!

However, the order in which you put them is important. We call this nesting tags. Remember this little mnemonic:

LIFO — Last In, First Out.

Basically, that means that the first tag you use should be the last tag you use. Like this:

<FIRST><SECOND>This is right.</SECOND></FIRST>

This is WRONG:

<FIRST><SECOND>No, don't do it this way!</FIRST></SECOND>

Ian Lloyd reminds us that the same principle applies to DIVs and other, more generalized elements as well. From his book:

<div id="outer">
   <div id="nested1">
      <p>A paragraph inside the first nested div.</p>
   </div>
      <div id="nested2">
         <p>A paragraph inside the second nested div.</p>
      </div>
</div>

Failure to nest tags causes invalid code and, sometimes, browser display problems.

A related problem is the failure to close tags. This can cause big problems throughout your page. For example, you might get confused while nesting tags:

<p><strong><em>Some content.</strong></p>

See what we did? We didn't include the closing em tag: the </em>.

As a result, everything on your page may suddenly display in italics. Not cool, but an easy fix.

More about italics in formatted text.

Nesting Lists

Web designer Rob Glazebrook discusses one of the fundamentals in building a basic dropdown menu: nested unordered lists.

More about lists.

Building strong, standards-compliant navigation lists depends on the ability to nest one list inside the other. Glazebrook writes:

[K]nowing how to build a good nested unordered list is critical to this entire process. I've seen many examples of people trying to build a dropdown menu on their own, running into problems they didn't understand, and throwing their hands up in frustration … only to discover their problem wasn't some obscure CSS problem, but an error in their list structure.

Let's reprint Glazebrook's properly written code for a basic unordered, nested list:

<ul id="navbar">
   <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav with Subnav</a>
         <ul>
            <li><a href="#">Subnav 1</a></li>
            <li><a href="#">Subnav 2</a></li>
         </ul>
      </li>
   <li><a href="#">Nav Item 3</a>
</ul>

The critical point of this example is how the second, or subordinate, unordered list comes before the closing tag of a list item in the first, or main, unordered list.

Say what?

Let's take a look at a chunk of the above code, with a notation:

<li><a href="#">Nav with Subnav</a>
   <ul>
   ...
   </ul>
</li>

The second, indented ul is the "child," or subordinate, list to the "parent" list, and will act as the "child," or secondary, list in the navigation.

Let's take a look at a frequent error many designers make. Remember, this example is wrong.

<ul id="navbar">
   <li><a href="#">Nav Item 1</a></li>
   <li><a href="#">Nav with Subnav</a></li> <– Oops!
      <ul> <– Oops!
         <li><a href="#">Subnav 1</a></li>
         <li><a href="#">Subnav 2</a></li>
      </ul>
   <li><a href="#">Nav Item 3</a> <– Oops!
</ul>

The biggest difference is that the second unordered list is not included inside a list item. As a result, the list will be improperly constructed and may not appear correctly (though some browsers have a remarkable ability to present code the way it was intended to look even when the designer flubs the code).

In order for these nested lists to work, the ul and/or ol elements must contain only li elements — no paragraphs, blockquotes, and so forth. The nested list has to be contained within an li element, and cannot be a "child" of the ul or ol element. Be very careful to open and close your elements properly.

An easy way to check these fancy nested lists is to put them by themselves inside a bare-bones HTML template, and check them for validity.

More about validation.