正确的方法来制作HTML嵌套列表？

Question

W3文档有一个前缀为的嵌套列表示例DEPRECATED EXAMPLE:,但它们从未使用非弃用示例对其进行更正,也未解释该示例的确切错误.

那么这些方法中哪一种是编写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>

Answer 1

选项2是正确的.

嵌套列表应位于<li>嵌套列表的元素内.

链接到列表上的W3C Wiki(摘自下面的评论):HTML列表Wiki.

链接到HTML5 W3C ul规范:HTML5ul.请注意,ul元素可能包含零个或多个li元素.这同样适用于HTML5ol.描述列表(HTML5dl)类似,但允许两者dt和dd元素.

更多说明:

• dl =定义列表.
• ol =有序列表(数字).
• ul =无序列表(项目符号).

Answer 2

选项2

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

嵌套列表 - UL

Answer 3

选项2是正确的:嵌套<ul>是<li>它所属的子级.

如果您验证,选项1在html 5中出现错误 - credit:user3272456

正确:<ul>作为孩子的<li>

制作HTML嵌套列表的正确方法是嵌套<ul>为<li>它所属的子节点.嵌套列表应该在嵌套列表的<li>元素内.

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

W3C 嵌套列表标准

列表项可以包含另一个完整列表 - 这称为"嵌套"列表.它对于像目录这样的东西很有用,例如本文开头的那些:

1. 第一章
   1. 第一节
   2. 第二节
   3. 第三节
2. 第二章
3. 第三章

嵌套列表的关键是要记住嵌套列表应该与一个特定的列表项相关.为了在代码中反映出来,嵌套列表包含在该列表项中.上面列表的代码如下所示:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

请注意嵌套列表如何在<li>包含列表项("第一章")的文本之后开始; 然后</li>在包含列表项之前结束.嵌套列表通常构成网站导航菜单的基础,因为它们是定义网站层次结构的好方法.

从理论上讲,您可以根据需要嵌套尽可能多的列表,但实际上嵌套列表可能会让人感到困惑.对于非常大的列表,您可能最好将内容拆分为多个带有标题的列表,或者甚至将其拆分为单独的页面.

Answer 4

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

Answer 5

我更喜欢选项二,因为它清楚地将列表项显示为该嵌套列表的拥有者.我总是倾向于语义上合理的HTML.