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


500

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>

Answers:


509

选项2是正确的。

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

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

链接到HTML5 W3C ul规范:HTML5ul。请注意,一个ul元素可能恰好包含零个或多个li元素。这同样适用于HTML5ol。描述列表(HTML5dl)相似,但允许dtdd元素。

更多说明:

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

41
这是官方的W3C信息,w3.org / wiki / HTML_lists#Nesting_lists,选项2是正确的方法
Jose Elera 2013年

我遇到了一个用有效HTML5似乎无法创建的情况:一个没有父级列表项的嵌套列表项(想象一下按TAB在字处理器中列表项的开头缩进)。看到这里,我的问题:stackoverflow.com/questions/61094384/...
马克

63

选项2

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

嵌套列表-UL


33

选项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>在包含列表项的之前结束。嵌套列表通常构成网站导航菜单的基础,因为它们是定义网站层次结构的好方法。

从理论上讲,您可以根据需要嵌套任意数量的列表,尽管实际上嵌套太深的列表可能会造成混乱。对于非常大的列表,最好将内容分成多个带有标题的列表,甚至将其分成单独的页面。


7

如果您验证,则选项1在html 5中显示为错误,因此选项2是正确的。


6

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


2

您是否考虑过将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>

2
您的例子不一样。第二个带有“选择A”,“选择B”,“子1”,“子2”的示例不适用于配对的dt/ dd标记。同样,固有样式(以及列表,我怀疑)仅来自默认的浏览器样式表,因此并没有说太多。我将其视为语义元素;如果您有一个定义列表,或者如果您只有一对标题/描述数据,a dl是一个不错的选择。
莉吉特

您是否可以编辑注释以给出等效示例-例如,它们都包含选项A和选项B,以及选项B的两个子条目Sub 1和Sub 2?
Zlatin Zlatev

-5

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

如果您控制内容/ css,这无关紧要,但是如果您要创建一个RTF编辑器,它将很方便。

例如,gmail,收件箱和evernote都允许创建如下列表:

任意嵌套列表

使用选项2,您将无法做到这一点(您将拥有一个额外的列表项),而使用选项1,则可以。


2
选项1产生无效的HTML。五年前,当被问到这个问题时,情况可能并非如此,但现在是事实。
j08691

是的,它绝对是无效的HTML。但是,它仍然被使用并且对于兼容性仍然有用。另一种方法是摆弄边距和项目符号样式,这在编写电子邮件时可能不是您想要的。
ibash

1
我不确定我是否理解为什么我想要这样的东西。您可以编辑评论以为此提供更多有意义的用法吗?
Zlatin Zlatev

重要的是,这允许对一组项目符号进行自由形式的编辑,从而使其更直观。作为用户,如果我有项目符号列表,则可能要缩进项目符号并将它们嵌套在新项目符号下。如果无法任意缩进,则用户首先需要插入标题项目符号,然后再缩进每个项目符号。具有任意缩进的功能,用户可以缩进项目符号组,然后插入新的标题项目符号。
ibash
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.