Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Correct way to write lists

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.

like image 982
Ross Avatar asked Dec 03 '22 16:12

Ross


1 Answers

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.

like image 174
Rob Kennedy Avatar answered Dec 28 '22 08:12

Rob Kennedy