A c t i o n f o r L i b r a r i e s — D e c e m b e r 2 0 0 2

The Internet Connection

By Michael Sauers

Nesting lists in XHTML
Recently I've been alerted to a small, yet important problem when coding nested lists in Web documents using XHTML. The problem with the coding will prevent Web documents from being validated one of the central goals of XHTML coding when you run it through a validator such as the W3C Validation Service, which checks for conformance to XHTML standards.

For example, in HTML the markup for a nested list would look similar to this:

1. <ul>
2. <li>Item 1</li>
3. <li>Item 2</li>
4.     <ul>
5.     <li>Sub A</li>
6.     <li>Sub B</li>
7.     </ul>
8. <li>Item 3</li>
9. </ul>

Although this markup appears as though it would be valid XHTML, when run through a validator it points to the nested <ul> and gives you the following error:

Error: element "ul" not allowed here; assuming missing "li" start-tag

Translated into English, you're being told that the nested <ul> is in the wrong place. You're probably wondering where should it be located instead. Upon a closer reading of the XHTML document type definition (DTD), the validator provides the following:

<!ELEMENT ul (li)+>

This means that a <ul> code can only contain an <li>. In the above example, we have a <ul> contained within another <ul> code, rendering the markup invalid. However, looking at the rules for <li> we find:

<!ELEMENT li %Flow;>

There is no restriction on what can be contained within an <li>. Therefore an <li> can contain a <ul>. So, to solve our coding problem we need to nest the <ul> within an <li>, waiting to close the primary list only after the secondary list is closed. To accomplish this we must move the </li> from line three to the end of line seven. Here is our revised markup, now valid in XHTML.

1. <ul>
2. <li>Item 1</li>
3. <li>Item 2
4.     <ul>
5.     <li>Sub A</li>
6.     <li>Sub B</li>
7.     </ul></li>
8. <li>Item 3</li>
9. </ul>

Next Article | Previous Article | Table of Contents | BCR Publications