有没有一种有效的方法可以用 HTML 元素包装 dt 和 dd ？

Posted 2023-02-24

【中文标题】有没有一种有效的方法可以用 HTML 元素包装 dt 和 dd ？

【英文标题】：Is there a valid way to wrap a dt and a dd with an HTML element?

【发布时间】：2012-06-08 03:47:14

【问题描述】：

我希望 html 可以做一些语义上与此等效的事情；

<dl class="main-list">
    <definitionitem>
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </definitionitem>
    <definitionitem>
        <dt>Stuff</dt>
            <dd>Alright!</dd>
    </definitionitem>
</dl>

但是，由于我最接近的东西是我对语义不是 100% 满意的东西；

<div class="redundant-wrapper">
    <dl class="main-list">
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </dl>
    <dl class="another-main-list">
        <dt>Stuff!</dt>
            <dd>Alright!</dd>
    </dl>
</div>

我想知道是否有人对您如何做到这一点有任何其他想法？

此外，将项目分组的原因是因为它们在被标记的内容中可视地分组。想象一个字典页面，有一个定义列表，其中每个定义都在一个向左浮动的插入框中。我经常遇到这种情况。

【问题讨论】：

没有“语法上有效”甚至“完全有效”的方式将dt 和dd 包装在一起； dl 的唯一有效子级是 dt 和 dd。

我知道它是无效的。我想知道的是，人们如何在语义上将单个 dt/dd 对组合为一个“定义项”，因为从语义上讲，您可以提出一个论点，即定义本身就是“定义列表”的语义子项有 dt/dd 的孩子。

@JosiahSprague — 您可以将<dd> 元素放在<dt> 元素之后和任何其他<dt> 元素之前。

Quentin，它没有将它们包装在一个可以在 DOM 中轻松操作的定义元素中。

在 XHTML 2.0 中有一个建议就是这样做的。 The <di> element。但是 XHTML 2.0 从来没有成功过，所以你的请求被取消了。编辑：哈，我看到你已经从那个页面引用了。哦，好吧。

【参考方案1】：

不，Ian Hickson（HTML 规范编辑器）是 convinced，这是 CSS 问题，而不是 HTML 问题：

这不应该是必要的。这是 CSS 的限制。

正确的解决方案是让 CSS 提供一些伪元素或其他 将匿名容器引入渲染的机制 包装您要包装的元素的树。

同时，fantasai（CSS规范编辑器）在contrary深信不疑：

我认为这不是 CSS 问题。我认为这是一个 HTML 问题。 伪元素对于规范来说是一件不平凡的事情，也是一件不平凡的事情 要实现的东西，使用起来比较混乱。

尽管如此，伊恩显然忽略了这一点，并继续与现实脱节。

LEGEND（根据 HTML 规范，它必须是 FIELDSET 的第一个直接子代）、FIGCAPTION（必须是 FIGURE 的第一个/最后一个直接子代）和 LI 也存在同样的问题（UL/OL 的直接子代）。

至于DT/DD，我个人useUL在DL的每个LI里面列出：

<ul>
    <li><dl>
        <dt>Lorem</dt>
        <dd>Lorem definition</dd>
    </dl></li>

    <li><dl>
        <dt>Ipsum</dt>
        <dd>Ipsum definition</dd>
    </dl></li>
</ul>

所以我们有DL 来建立DT 和DD 之间的关系，以及UL 列表来使它们都属于一个列表。

更新 (2016-11-14)： HTML 标准（现在为 WHATWG version）现在（自 2016-10-31 起）allows DIV 元素（可选与所谓的脚本支持元素SCRIPT，TEMPLATE) 是DL 元素的直接子元素。 W3C 的 HTML validator 确实没有解释了这一变化，但实验性的 HTML5.org validator 确实。

更新 (2017-01-18)： 原来规范确实 not 允许 DT/DD 的多个嵌套 DIV 包装器，因此该功能非常有用在实践中实际上非常有限，这里描述的UL→LI→DL 方法仍然适用。

【讨论】：

我喜欢这个主意。它在语义上并不完美，但正如你所说，规范并没有真正允许这样做。这是迄今为止我听到的最语义化的想法。感谢您的想法！

HTML 规范现在已更改并允许在 dl 中使用 div。 html.spec.whatwg.org/multipage/semantics.html#the-dl-element

@zcorpan 哇，谢谢，西蒙。这是 HTML 世界中的一种范式转变。太糟糕了，更改非常狭窄，仅涉及对 DT/DD 元素进行分组，而通用容器仍然不允许 无处不在 - 例如用于包装 LEGEND 和 FIGCAPTION。不过，我希望在 CSS 方面解决这个问题，因为这将允许根据例如不同的分组元素集在媒体查询上，但至少在 HTML 中和至少在 DT/DD 中使用它总比没有好。

@Doug 重点是 CSS 人说这是一个 HTML 问题，而 HTML 人说这是一个 CSS 问题。所以我们这里有一个恶性循环。我更喜欢 CSS 解决方案，因为它允许根据例如不同的布局进行布局。带有硬编码容器的 HTML 无法执行的媒体查询。但 HTML 解决方案总比没有好。

我认为重要的是要记住，当我们谈论“规范”时，有两个来源。与 W3C 相比，WHATWG “不那么正式”（取决于您与谁交谈）。然而。截至 2017 年 10 月，根据 WHATWG (html.spec.whatwg.org/multipage/semantics.html#the-dl-element) 和 W3C (w3.org/TR/html5/single-page.html#the-dl-element)，用 标签包装一组 和 标签是可以接受的。

【参考方案2】：

有一个repo about dd-dt wrapping。根据 html 规范 whatwg 它是OK to wrap each dd & dt，在 DL 中带有 div 标签。

<dl>
   <div>
     <dt>Bolster</dt>
     <dd>to support, strengthen, or fortify</dd>
   </div>
   <div>
     <dt>Capitalize</dt>
     <dd>to use to your advantage</dd>
   </div>
</dl>

【参考方案3】：

我们迎来了 2018 年！ CSS grid 得到很好的支持，如果主要目标是控制 dt/dd...的定位，这提供了另一种可能的解决方案/解决方法。

HTML

<dl>
    <dt>Favorite food</dt>
    <dd>Pizza</dd>

    <dt>Favorite drink</dt>
    <dd>Beer</dd>
</dl>

CSS

dl 
    display: grid;
    grid-template-columns: min-content 1fr;

（您可以调整grid-template-columns 的值以匹配您的特定设计要求。）

这并没有“解决”规范的限制，但我认为它很有帮助，因为您特别提到了对语义标记的担忧。正如我上面提到的，网格可以做什么是有限制的，但如果目标是控制dt/dd 的布局，我认为这可能是最符合语义的方式，它仍然是有效的 HTML。