When I first became aware of the XHTML standards, I started migrating my pages to be XHTML compliant. One of the first sticking points I found is that no matter what I tried, my nested lists never seemed to validate. In this tutorial, we'll look at nested lists, and find out how to format them so that they are XHTML compliant.

Lists and Nested Lists

Lists are quickly becoming a very powerful tool in web design. You need not look far to find creative uses for lists. For example, the menu bar above is created using a basic list and a few CSS styles. Those concerned with web accessibility like lists because they offer a structured, symantic way of displaying data. Basic lists come in two flavors: ordered and unordered. You can think of recipe instructions as an ordered list, whereas your grocery list would be an unordered list.

Nested lists contain lists within lists, for example:

1. Combine ingredients in a large bowl
   1. First combine dry ingredients
   2. Next combine wet ingredients
   3. Mix together slowly, stirring continuously
2. Mix for 4 minutes
3. Pour into a greased 6" diameter pan
4. Bake at 350°F for 25 minutes

Notice that step one of the recipe now contains a list within it (in this case, sub instructions for step one). In this example, you have an ordered list nested in another ordered list, but you can freely mix and match. For example, you might have an ordered list nested within an unordered list, etc.

XHTML Compliant Lists

The standard HTML markup for lists is valid XHTML, as long as you ensure all <li> elements have their corresponding </li> closing tags (the same goes for the <ul>, <ol> tags, etc.) . For example, our unordered grocery list above can be generated from the following code:

<ul>
    <li>Milk (4L)</li>
    <li>Eggs</li>
    <li>Orange Juice</li>
    <li>Fabric Softener</li>
</ul>

To created XHTML valid nested lists, the sub list must be nested within an <li></li> tag. For example, the following is the XHTML compliant code for generating the nested list above.

<ol>
  <li>Combine ingredients in a large bowl
    <ol>
	  <li>First combine dry ingredients</li>
	  <li>Next combine wet ingredients</li>
	  <li>Mix together slowly, stirring continuously</li>
    </ol>
  </li>
  <li>Mix for 4 minutes</li>
  <li>Pour into a greased 6" diameter pan</li>
  <li>Bake at 350F for 25 minutes</li>
</ol>

The important thing to notice here is that the code for the ordered sub list is nested within the <li> and </li> tags. In my opinion, this isn't intuitive. However, you can try nesting an <ol> or <ul> within another <ol> or <ul> and you'll see that it doesn't validate. The sub list must be nested within an <li> element for it to validate as XHTML.

Conclusion

There are many applications for lists and nested lists once you know how to use them effectively. Nested lists are a great way to create a site map for example (check out the site map below). Now that you know how to create them in an XHTML compliant way, keep an eye out for situations where a list would be a useful and meaningful way to structure your content, whatever it may be.