如何正确地创建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>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>
  

- Ricket

Answer 1

选项2是正确的。

嵌套列表应该在其所嵌套的列表的<li>元素内。

链接到MDN关于列表的文章（来自下面的评论）：HTML列表。

链接到HTML5 W3C ul规范：HTML5 ul。

请注意，ul元素可以包含零个或多个li元素。同样适用于HTML5 ol。

描述列表（HTML5 dl）类似，但允许同时使用dt和dd元素。

更多说明：

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

---

MDN链接关于嵌套列表。

- DwB

---

我遇到了一个看起来无法使用有效的HTML5创建的情况：一个没有父列表项的嵌套列表项（想象一下在文字处理器中按TAB键缩进列表项的开头）。请参见我的问题：https://stackoverflow.com/questions/61094384/html5-nested-lists-indented-list-item-without-parent-possible - Mark

我很高兴得到这个答案，但是找不到如何将选项1中的无效HTML5（例如BlueGriffon创建的，并且_需要_正确显示嵌套列表）转换为选项2中的有效HTML5。 HTML Tidy似乎无法做到这一点，而我尝试过的所有所见即所得编辑器都会接受无效标记的复制和粘贴，并保持原样。 :( - rphair

Answer 2

选项 2

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

嵌套列表 - UL

- csi

Answer 3

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

如果您验证，选项1在html 5中会出现错误--来源：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>之前结束。嵌套列表通常用作网站导航菜单的基础，因为它们是定义网站分层结构的好方法。

理论上，您可以嵌套任意数量的列表，但实际上，嵌套列表过深可能会变得混乱。对于非常大的列表，最好将内容拆分成带有标题的几个列表，甚至将其拆分成单独的页面。

- Geoffrey Hale

Answer 4

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

- user3272456

Answer 5

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

- Ken Gregory

Answer 6

您有没有考虑过在嵌套列表中使用“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>

- CSSMAN

---

你的例子不一样。第二个例子中的“Choice A”、“Choice B”、“Sub 1”、“Sub 2”对于成对的dt/dd标签是无效的。此外，固有的样式（以及缩进，我怀疑）仅来自默认浏览器样式表，因此这并没有太大意义。我会将其视为语义元素；如果你有一系列定义，或者只是具有标题/描述数据对的情况下，dl可能是一个不错的选择。 - Ricket

你能否编辑你的评论以提供等价的例子 - 例如，两个都包含选项A和选项B，其中包含选项B的两个子条目Sub1和Sub2？ - Zlatin Zlatev

Answer 7

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

如果您控制内容/ CSS，则这不应该有影响，但如果您正在制作富文本编辑器，它会派上用场。

例如，Gmail、Inbox 和 Evernote 都允许创建像这样的列表：

使用选项2无法实现该功能（会多出一个列表项），而使用选项1则可以。

- ibash

---

选项1会生成无效的HTML。五年前当这个问题被提出时可能不是这样，但现在是这样的。 - j08691

是的，它肯定是无效的HTML。然而，它仍然被使用并且对于兼容性仍然有用。另一种选择是调整边距和项目符号样式，但这可能不是你在撰写电子邮件时想要的。 - ibash

我不确定为什么我想要这样的东西错位。你能编辑你的评论，以便更有意义地使用它吗？ - Zlatin Zlatev

重要的是，这使得一组项目符号具有自由形式编辑的能力，从而使其更具直观感。作为用户，如果我有一个项目符号列表，我可能想将它们缩进并嵌套在一个新的项目符号下面。如果没有任意缩进的能力，用户首先需要插入标题项目符号，然后缩进每个项目符号。有了任意缩进的能力，用户可以缩进一组项目符号，然后插入一个新的标题项目符号。 - ibash

截至2023年5月，我可以确认这就是Google文档在标记和剪贴板数据中如何构建缩进的<ol>和<ul>。楼主提出了一个有效的观点。 - d2vid