html - 列表的正确写法

Question

这是我思考了一段时间的问题，因为我看到两者都在实践中使用过。

方法一

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

这在我看来在语义上是正确的，因为子列表是该列表项的子列表，但是它不是很干净(列表项内容 <list right next to it>)。

方法二

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

更清晰，但不能直接理解该列表是第 2 项的子列表(尽管它可以通过人类推理理解)。

顺便说一句，这纯粹是对语义标记的关注，两种方法在页面上呈现相同的内容。

那么SO，你怎么看？可能的来源是可取的，但个人使用也很好。我注意到 MediaWiki 的继承目录使用的是方法 1，这鼓励我相信这是正确的用法。

Answer 1

方法 2 不是有效的 HTML。 OL 不允许作为另一个 OL 元素的直接子元素。 OL 中只允许使用 LI。

此外，由于缩进，子列表对第 2 项的成员资格仅对人类读者显而易见。使用 LI 进行缩进，看起来内部列表本身就是第三项。我可能期待这样的渲染，有两个数字:

1. List item 12. List item 23. 1. List item 34. List item 4

方法 1 是可行的方法。