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.
