嵌套 HTML 定义列表 (<dl>) 是不是正确？

Posted 2023-02-24

【中文标题】嵌套 HTML 定义列表 (<dl>) 是不是正确？

【英文标题】：Is it correct to nest HTML definition lists (<dl>)?嵌套 HTML 定义列表 (<dl>) 是否正确？

【发布时间】：2010-09-28 04:39:06

【问题描述】：

嵌套定义列表在语义上是否正确，或者它们应该只是“名称/值对的平面列表”。

The specs 似乎没有禁止它。

进一步this question。

【参考方案1】：

我通过用无序或有序列表替换嵌套定义列表来解决这个问题，例如。

<dl>
  <dd>Black hot drink</dd>
  <ul>
    <dd>White cold drink</dd>
    <ol>
      <dd>Red sweet drink</dd>
    </ol>
  </ul>
</dl>

【参考方案2】：

有趣的问题。

确实，DefLists 旨在表示键和值，但它们的多重性不是 1，而是 1+。如果允许这种复杂性，并且记住 dt 是内联的，我认为用其他事物的树来表示定义事物不会有语义问题。

【参考方案3】：

规范似乎允许这样做，前提是只有 <dd> 包含嵌套列表。该规范声明 <dt> 是一个内联元素，因此它不能包含嵌套列表。 <dd> 是一个块元素，因此其中一个内部的列表就可以了。

【讨论】：

Firefox 48 和 IE9 可以很好地处理 DL 的直接嵌套作为 DL 的子级。谷歌浏览器呈现错误：没有缩进；一切都冲洗干净。如果您使用 DD 标记包装嵌套的 DL，则 IE 或 FF 呈现的方式不会发生任何变化。在 Chrome 上，会出现缩进，但在嵌套列表的顶部和封闭列表中的前一项之间有一个难看的额外空白垂直空间。

但是，react 编译器会抛出无效 dom 嵌套错误：<dd> cannot appear as a descendant of <dd>.

【参考方案4】：

如果它适用于所有浏览器，那就去做吧。

我知道这可能会引起争议，很多人可能会告诉你这不是它应该使用的方式。网页设计的不成文规则，例如几乎任何事情都使用列表，这正是人们决定要做的事情。没有理由使用浮动（其目的是在文本块中浮动图像）来布局网站上的每个小细节。但是，如果您尝试使用表格，那么您显然是泡沫前时代的白痴，并且您不知道如何设计。

所以，做你想做的事，不要为了解决问题而让事情变得更复杂。

【讨论】：

比较表格设计与浮动使用有点不公平，每当您从 html 文件中提取 data 时，您实际上是使用提供的元素确定数据的含义，而 CSS 是纯粹的一种表现行为，这就是语义网的意义所在……

【参考方案5】：

当然。嵌套DLs 没有任何问题。您可以在语义上拥有“子定义”。