正确的方法使HTML嵌套列表?

W3文档有一个前缀为DEPRECATED example:的嵌套列表示例，但他们从未用一个非DEPRECATED示例来纠正它，也没有确切地解释这个示例的错误所在。

那么，下面哪种方法是编写HTML列表的正确方法呢?

选项1:嵌套<ul>是父<ul>的子元素

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

选项2:嵌套的<ul>是它所属的<li>的子元素

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

当前回答

我更喜欢选项二，因为它清楚地显示列表项是嵌套列表的所有人。我总是倾向于语义健全的HTML。

2011-05-05 14:30:52

其他回答

选项2是正确的。

嵌套列表应该在它所嵌套的列表的<li>元素中。

链接到W3C Wiki on Lists(摘自下面的评论):HTML Lists Wiki。

链接到HTML5 W3C ul规范:HTML5 ul。注意，一个ul元素可以包含0个或多个li元素。这同样适用于HTML5。描述列表(HTML5 dl)是类似的，但同时允许dt和dd元素。

更多的笔记:

Dl =定义列表。 Ol =有序列表(数字)。 Ul =无序列表(项目符号)。

官方W3C链接(已更新)。

2011-05-05 14:28:46

选项2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

嵌套列表- UL

2011-05-05 14:30:38

这里没有提到的是选项1允许任意深度嵌套列表。

如果你控制的是content/css，这应该无关紧要，但如果你正在制作一个富文本编辑器，它就会派上用场。

例如，gmail, inbox和evernote都允许创建这样的列表:

选项2不能这样做(你会有一个额外的列表项)，而选项1可以。

2016-06-30 02:05:40

我更喜欢选项二，因为它清楚地显示列表项是嵌套列表的所有人。我总是倾向于语义健全的HTML。

2011-05-05 14:30:52

如果验证，选项1在html 5中出现错误，因此选项2是正确的。

2014-02-04 19:52:51

正确的方法使HTML嵌套列表?

推荐文章

最新文章

标签