views:

400

answers:

3

This is something I've pondered over for a while, as I've seen both used in practise.

Method 1

<ol>
    <li>List item 1</li>
    <li>List item 2
        <ol>
            <li>List item 3</li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

This seems semantically correct to me, since the sub-list is a sub-list of that list item, however it isn't very clean (List Item Content<list right next to it>).

Method 2

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
        <ol>
            <li>List item 3</li>
        </ol>
    <li>List item 4</li>
</ol>

Cleaner, but it's not directly understandable the list is a sub-list of item 2 (although it's understandable by human inference).

This is purely a concern for semantic markup by the way, both methods present the same content on the page.

So SO, what do you think? Sources where possible are preferable but personal use is good too. I notice that MediaWiki's heirachial TOCs are using Method 1 which encourages me to believe that's the correct use.

+2  A: 

Method 1 is correct.

chaos
[Citation needed]
TheSoftwareJedi
It was original research. :)
chaos
+11  A: 

Method 2 is not valid HTML. OL is not allowed as a direct child of another OL element. Only LI is allowed in an OL.

Also, the membership of the sublist to item 2 is only apparent to a human reader because of the indentation. Make the indentation even with the LIs, and it appears as though the inner list is itself the third item. I might expect a rendering like this, with two numbers:

1. List item 1
2. List item 2
3. 1. List item 3
4. List item 4

Method 1 is the way to go.

Rob Kennedy
And if you're really concerned with the text content brushing-up against the element content ("<li>List item 2<ol>...") for aesthetic reasons (and that really is all it comes down to, aesthetics), wrap the text content in a span ("<li><span>List item 2</span><ol>..."). This isn't necessary though.
Chris
+2  A: 

HTML 4.01 only allows LI items in an OL. The closing tag of LI, however, is optional. Which means this is equivalent to your method 1:

<ol>
   <li>List item 1
   <li>List item 2
      <ol>
        <li>List item 3
      </ol>
   <li>List item 4
</ol>

It is somewhat ambiguous to a reader where the closing LI's are - though the spec is clear that it would be after the closing OL.

XHTML 1.1 has the same restrictions, but forces the use of the closing LI to make it explicit.

Mark Brackett