A nested list is essentially a sub-list, and can be very helpful when clarifying points in an unordered list. Unfortunately, many editors and programs do not properly format these lists in valid XHTML Strict code, resulting in needless errors. This first came to our attention when testing out a WYSIWYG editor without proper XHTML Strict support.

Here is an example of a simple unordered list with a nested element.

• A Point About Something
  • This bullet is making a point about something
  • And these bullets explain the main point
• Heres Another Main Point
• And Another

Now, the problem we’ve found is that some editors do not properly carry the <li> tag below the nested list. This is required for XHTML Strict validation, and as long as your editor does not automatically “correct” this, you should be able to fix this error in only a minute or two.

Here’s the incorrect code:
<ul>
<li>A Point About Something</li>
<ul>
<li>This bullet is making a point about something</li>
<li>And these bullets explain the main point</li>
</ul>
<li>Heres Another Main Point</li>
<li>And Another</li>
</ul>

Depending on how long your list is, this will give you a boatload of unnecessary errors, including “document type does not allow element “ul” here; assuming missing “li” start-tag,” and “end tag for “li” omitted, but OMITTAG NO was specified.”

To fix this, all we’ll need to do is move that red highlighted </li> tag below the nested list, after the </ul> tag. We’ve now changed the color of that tag to blue to show you where it gets placed.

Here’s the correct code:
<ul>
<li>A Point About Something
<ul>
<li>This bullet is making a point about something</li>
<li>And these bullets explain the main point</li>
</ul></li>
<li>Heres Another Main Point</li>
<li>And Another</li>
</ul>

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

Tags: html, nested lists, xhtml strict

This entry was posted on Wednesday, May 7th, 2008 at 7:35 am and is filed under html. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.