diggersworld diggersworld - 3 months ago 21
HTML Question

HTML lists within lists for different scenarios

Hey everyone, I'm currently deciding how to layout a store front.

I'm very fond of using lists because semantically I am presenting the user with a list of items. However the details of each item I want to show is semantically a list as well.

Here's two different scenarios:

For indented bullets I would usually do something like this:

<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
<ul>
<li>Indented Bullet 1</li>
<li>Indented Bullet 1</li>
</ul>
</ul>


However for the product list mentioned above, it would be more like this:

<ul>
<li>
<ul>
<li>Product Name</li>
<li>Product Image</li>
<li>Product Author</li>
<li>Product Price</li>
</ul>
</li>
<li>
<ul>
<li>Product Name</li>
<li>Product Image</li>
<li>Product Author</li>
<li>Product Price</li>
</ul>
</li>
</ul>


So... my question is, which way is the right way to use lists within lists? Are both ways right, or is only one of them right? If so which and why?

Answer

Only the second way works. Only li elements can be children of ul (and ol) elements.

Have a look at the DTD[docs]:

<!ELEMENT UL - - (LI)+                 -- unordered list -->

li elements on the other hand can contain all block[docs] and inline[docs] elements:

<!ELEMENT LI - O (%flow;)*             -- list item -->

(definition of %flow;[docs])