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

Proper way to make HTML nested list?

提问by Ricket

The W3 docs have a nested list exampleprefixed by DEPRECATED EXAMPLE:, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.

W3 文档有一个以 为前缀的嵌套列表示例DEPRECATED EXAMPLE:，但他们从未使用未弃用的示例对其进行更正，也没有准确解释该示例的错误所在。

So which of these ways is the correct way to write an HTML list?

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

Option 1: the nested <ul>is a child of the parent <ul>

选项 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>

Option 2: the nested <ul>is a child of the <li>it belongs in

选项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>

回答by DwB

Option 2is correct.

选项2是正确的。

The nested list should be inside a <li>elementof the list in which it is nested.

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

Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.

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

Link to the HTML5 W3C ulspec: HTML5 ul. Note that a ulelement may contain exactly zero or more lielements. The same applies to HTML5 ol. The description list (HTML5 dl) is similar, but allows both dtand ddelements.

链接到 HTML5 W3Cul规范：HTML5ul。请注意，一个ul元素可能正好包含零个或多个li元素。这同样适用于HTML5ol。描述列表 ( HTML5dl) 类似，但允许dt和dd元素。

More Notes:

更多注意事项：

• dl= definition list.
• ol= ordered list (numbers).
• ul= unordered list (bullets).

• dl= 定义列表。
• ol= 有序列表（数字）。
• ul= 无序列表（项目符号）。

回答by csi

Option 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

嵌套列表 - UL

回答by Geoffrey Hale

Option 2 is correct: The nested <ul>is a child of the <li>it belongs in.

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

If you validate, option 1 comes up as an error in html 5 -- credit: user3272456

如果您验证，选项 1 将作为 html 5 中的错误出现 - 信用：user3272456

---

---

Correct: <ul>as child of <li>

正确：<ul>作为孩子<li>

The proper way to make HTML nested list is with the nested <ul>as a child of the <li>to which it belongs. The nested list should be inside of the <li>element of the list in which it is nested.

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

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

---

---

W3C Standard for Nesting Lists

W3C嵌套列表标准

A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:

一个列表项可以包含另一个完整的列表——这被称为“嵌套”列表。它对于诸如目录之类的内容很有用，例如本文开头的内容：

1. Chapter One
   1. Section One
   2. Section Two
   3. Section Three
2. Chapter Two
3. Chapter Three

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

The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:

嵌套列表的关键是记住嵌套列表应该与一个特定的列表项相关。为了在代码中反映这一点，嵌套列表包含在该列表项中。上面列表的代码如下所示：

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

Note how the nested list starts after the <li>and the text of the containing list item (“Chapter One”); then ends before the </li>of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.

注意嵌套列表是如何在<li>包含列表项的和 文本之后开始的（“第一章”）；然后</li>在包含列表项的之前结束。嵌套列表通常构成网站导航菜单的基础，因为它们是定义网站层次结构的好方法。

Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.

从理论上讲，您可以根据需要嵌套任意数量的列表，但在实践中，嵌套列表太深可能会令人困惑。对于非常大的列表，最好将内容拆分为多个带有标题的列表，或者甚至将其拆分为单独的页面。

回答by user3272456

If you validate , option 1 comes up as an error in html 5, so option 2 is correct.

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

回答by Ken Gregory

I prefer option two because it clearly shows the list item as the possessor of that nested list. I would always lean towards semantically sound HTML.

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

回答by CSSMAN

Have you thought about using the TAG "dt" instead of "ul" for nesting lists? It's inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside.

你有没有想过使用标签“dt”而不是“ul”来嵌套列表？它的继承风格和结构允许您为每个部分设置一个标题，并自动将里面的内容制成表格。

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

VS

VS

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

回答by ibash

What's not mentioned here is that option 1 allows you arbitrarily deep nesting of lists.

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

This shouldn't matter if you control the content/css, but if you're making a rich text editor it comes in handy.

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

For example, gmail, inbox, and evernote all allow creating lists like this:

例如，gmail、收件箱和印象笔记都允许创建这样的列表：

With option 2 you cannot due that (you'll have an extra list item), with option 1, you can.

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