在 li 或 dl 中嵌套 div 的 HTML5 标准

Question

我知道在 HTML5 中不允许将 div 嵌套在 li 中，尽管你可以并且它可以工作。这是否意味着我不应该使用它？ dls中嵌套div的标准是什么？

Answer 1

此信息不正确 - div 元素被视为 flow content 并且很好地允许在 li 元素中。您可能会将它与 ul/ol 元素混淆，后者可能只包含相应的 lis。

HTML5 的变化在于，它不再具有块级和内联元素。相反，elements into several categories 有更复杂的区别。

要查看根据 HTML5 在元素内允许的内容，请参阅特定标记的描述，其中 "Content model" 部分告诉您在此特定元素内允许哪些内容。

编辑：解决 cmets 中关于列表元素的困惑

（根据2019-07-30的HTML生活标准）

列表有多种类型，最常见的是unordered (ul) 和ordered (ol) 列表。 ul 和 ol 是“容器”元素，仅将 list item (li) 作为子元素 - 不允许使用其他元素*。 li 元素本身可以包含任意 flow content。
_{*（从技术上讲，它们也可以包含 "script-supporting" elements}

<ol>
   <li></li>
   ...more li elements
</ol>

<ul>
   <li></li>
   ...more li elements
</ul>

对于description lists (dl)，过去有相同的限制，即它们只能包含各自的子元素dt 和dd，但最近的更改也允许div 子元素，只要那些divs 本身包含 dt 或 dd。

<dl>
  <dt>term</dt><dd>description</dd>
</dl>

// the following is now valid as well:

<dl>
  <div><dt>term</dt><dd>description</dd></div>
</dl>

作为助记符：容器元素应该只包含它们各自的子元素，而这些子元素可以包含您喜欢的任何内容。

Answer 2

完全允许将<div> 元素嵌套在<li> 和<dd> 元素中。 <li>/<dd> 元素可能包含流内容，<div> 元素就是。

规格：http://www.w3.org/TR/html5/grouping-content.html#the-li-element

Answer 3

既然我和第二个问题有同样的问题：在dls中嵌套div的标准是什么？我会在这里回答：

根据 HTML5 (https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)，

"dl 元素表示一个由零个或多个名称-值组组成的关联列表（一个描述列表）。一个名称-值组由一个或多个名称组成（dt 元素，可能作为 div 元素子元素的子元素）后跟一个或多个值（dd 元素，可能作为 div 元素子元素的子元素），忽略除 dt 和 dd 元素子元素之外的任何节点，以及作为 div 元素子元素的子元素的 dt 和 dd 元素。在单个 dl 元素中，每个名称不应有多个 dt 元素。”

甚至还有一个将 div 嵌套在 dl 中的示例，用于包装 dt 和 dd 元素。

Answer 4

我不确定这是否被视为语义，但我很喜欢这样做：

<dl>
    <li>
        <dt>My Key</dt><dd>My Value</dd>
    </li>
    <li>
        <dt>My Key</dt><dd>My Value</dd>
    </li>
    <li>
        <dt>My Key</dt><dd>My Value</dd>
    </li>
</dl>