So, I began testing all of my sites for XHTML compliance. I noticed that some of my nested lists were not validating. They all displayed properly, but (*gasp*) they weren’t valid XHTML. Here’s what I found the problem was, and the resulting solution:

I was displaying the following list:

• Item 1
• Item 2
• Item 3
• Item 4
  • Sub-Item 1
  • Sub-Item 2
• Item 5
• Item 6

After a little research, I discovered that my markup was as following:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <ul>
          <li>Sub-Item 1</li>
          <li>Sub-Item 2</li>
     </ul>
     <li>Item 5</li>
     <li>Item 6</li>
</ul>

When in fact, it should actually be:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4
          <ul>
               <li>Sub-Item 1</li>
               <li>Sub-Item 2</li>
          </ul>
     </li>
     <li>Item 5</li>
     <li>Item 6</li>
</ul>

Note how the <ul> tags are enclosed in the parent <li> item in the Valid XHTML example. Pretty simple stuff, but I’m sure there are others out there making the same mistake. Let’s all get our stuff together, and become compliant.