Is there a way to group `<li>` elements?

Question

I need to divide into groups several <li> elements in a list, is it possible? (I know I an give each element different class names/separate into different <ul>)

Answer 1

I believe your only options are the ones you've already identified, multiple lists or via classes, since for an li to be in the list defined by a ul or an ol, it must be the immediate child of that ul/ol (reference).

Answer 2

According to the XHTML schema (or one the schema anyway), the only thing you put inside a <ul> is a <li>, as described at http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule

You might tweak the appearance of the list items using CSS, by assigning different class values to the <li> elements.

<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...

Answer 3

Have you considered nested UL's? I believe this would validate:

<UL>
    <LI>
        <UL>
            <LI></LI>
            <LI></LI>
            <LI></LI>
        </UL>
    </LI>
    <LI>
        <UL>
            <LI></LI>
            <LI></LI>
            <LI></LI>
            <LI></LI>
            <LI></LI>
        </UL>
    </LI>
</UL>

Your CSS trick was my first guess; too bad you can't use that.

Answer 4

If you need to separate into different groups items from one unordered list than they should belong to different lists isn't it OR should be grouped in an ordered list (many ULs in one OL).

If this is for presentation needs (to display one list on many columns) and you can solve a few constraints, the second technique in http://articles.techrepublic.com.com/5100-10878_11-5810687.html or explained also here : http://www.communitymx.com/content/article.cfm?page=2&amp;cid=27F87

Such groups exist for select (optgroup) but obviously you can't separate the option elements because you must select only one of them so they should belong to the same element.

Answer 5

Have you considered using multiple-inheritance of CSS classes? This can be a bit messy to maintain, but it will solve the case of the same entry in multiple groups. The HTML looks something like this:

<ul class="pizza-toppings">
    <li class="meat">pepperoni</li>
    <li class="meat">bacon</li>
    <li class="vegetarian">cheese</li>
    <li class="vegetarian vegan">mushrooms</li>
    <li class="vegetarian vegan">onions</li>
</ul>

Here we have three groups (meat, vegetarian and vegan) and some toppings, like mushrooms and onions, are part of more that one group.