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 thi开发者_JS百科s:

<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?

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])

Only the second way is correct. The only elements allowed in an ul element are li elements. This can be seen in the standard, e.g. in the normative DTD.

I always use a <ul> inside the <li> like this: <ul><li>something<ul><li>inside</li><ul></li></ul>

The first one is incorrect - you can't do . UL can have li as child only. You must use this template:

<ul>
  <li>---almost everything---</li>
</ul>

So the second one is ok :)

I concur that syntactically, the second code snippet is correct. Since you're also interested in semantics (which is great!) I wonder if the following might not be an improvement:

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

I'm no expert in semantic markup, but I fully support the idea behind it, so I would be interested in others' options.

Both of the code sets work. I just compiled both of them along with their alternative syntax. Output was identical. The difference in syntax is where the /li is placed, but it doesn't matter. I write it as in the first example. I was surprised the second example worked, but it did. I learned programming on Pascal language 30 years ago, which may influence the way I view the nested statement pattern.

In looking around to see what others do I just learned something new - a description list.

<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl> 

http://www.w3schools.com/html/html_lists.asp