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

Question

W3文档的前缀为DEPRECATED EXAMPLE: <ul>，但他们从未使用未弃用的示例对其进行更正，也未解释该示例的确切错误。

那么这些方法中哪一种是编写HTML列表的正确方法？

选项1 ：嵌套<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>

的子级

<ul>

选项2 ：嵌套<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> 的子级

{{1}}

Answer 1

选项2 是正确的。

嵌套列表应该是位于嵌套列表的<li>元素内。

链接到列表中的W3C Wiki（摘自下面的评论）：HTML Lists Wiki。

链接到HTML5 W3C ul规范：HTML5 ul。请注意，ul元素可能包含零个或多个li个元素。这同样适用于HTML5 ol。 说明列表（HTML5 dl）类似，但同时允许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>

Nesting Lists - UL

Answer 3

选项2是正确的：嵌套的<ul>是其所属的<li>的子项。

  

如果您validate，则选项1在html 5中显示为错误 - 信用：user3272456

正确：<ul>作为<li>

的孩子

制作HTML嵌套列表的正确方法是将嵌套的<ul>作为其所属的<li>的子级。嵌套列表应位于嵌套列表的<li>元素内。

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

Nesting Lists

的W3C标准

列表项可以包含另一个完整列表 - 这称为＆＃34;嵌套＆＃34;一个列表。它对于像目录这样的内容非常有用，例如本文开头的内容：

  

  
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。

Answer 6

您是否考虑过使用TAG“dt”代替“ul”嵌套列表？它的继承风格和结构允许您为每个部分创建一个标题，并自动将内容列表内容。

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

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

Answer 7

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

如果您控制内容/ css，这无关紧要，但如果您正在制作富文本编辑器，它就会派上用场。

例如，gmail，inbox和evernote都允许创建如下列表：

使用选项2你不能（你将有一个额外的列表项），你可以使用选项1。