正确的列表书写方式

Question

我已经思考了一段时间，因为我看到这两种方法都被实践使用。

方法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>

我认为这个语法在语义上是正确的，因为子列表是该列表项的子列表，但它不够清晰（列表项内容<靠在其旁边的列表>）。

方法二

<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的分层TOC正在使用Method 1，这让我相信那是正确的用法。

- Ross

Answer 1

第二种方法不是有效的HTML。在另一个OL元素中，不允许OL作为直接子元素。只有LI可以在OL中使用。

此外，将子列表成员与第2项对齐只对人类读者有效，因为缩进。使缩进与LI对齐，然后它看起来就好像内部列表本身是第三项。我可能会期望呈现出两个数字的渲染：

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

第一种方法是可行的。

- Rob Kennedy

---

如果您真的担心文本内容与元素内容（“<li>列表项2<ol>...”）因美观原因产生冲突（这确实是所有问题的关键，即美学），请将文本内容包装在<span>中（“<li><span>列表项2</span><ol>...”）。但这并非必要。 - Chris

Answer 2

方法一是正确的。

- chaos

Answer 3

HTML 4.01规定OL中只能包含LI项。然而，LI的闭合标签是可选的。这意味着您的方法1与此等效：

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

对于读者来说，关闭LI标签的位置有些模糊不清 - 尽管规范明确指出应该在关闭OL标签之后。

XHTML 1.1有相同的限制，但强制使用关闭LI标签以使其明确。

- Mark Brackett