CODEWITHSUNDEEP
htmlxhtmlhtml-listsnested-lists
diggersworld
diggersworld

Reputation: 13080

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?

Upvotes: 0

Views: 230

Answers (6)

Rob Morriss
Rob Morriss

Reputation: 1

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

Upvotes: 0

chprpipr
chprpipr

Reputation: 2039

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.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816780

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

Upvotes: 2

grongor
grongor

Reputation: 1355

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

Upvotes: 0

jackJoe
jackJoe

Reputation: 11148

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

Upvotes: 0

Lars Noschinski
Lars Noschinski

Reputation: 3667

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.

Upvotes: 0

Related Questions