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

Question

我希望 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>

我想知道是否有人对如何执行此操作有任何其他想法？

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

Answer 1

不，Ian Hickson(HTML 规范编辑)是 convinced这是一个 CSS 问题，而不是 HTML 问题:

This shouldn't be necessary. It's a limitation of CSS.

The right solution is for CSS to provide some pseudo-element or othermechanism that introduces an anonymous container into the renderingtree that wraps the elements you want to wrap.

同时，fantasai(CSS规范编辑)对contrary深信不疑| :

I don't think this is a CSS problem. I think it's an HTML problem.Pseudo-elements are a non-trivial thing to spec, and a non-trivialthing to implement, and a comparatively confusing thing to use.

然而，Ian 显然忽略了这一点并继续脱离现实。

LEGEND 也有同样的问题(根据 HTML 规范，它必须是 FIELDSET 的第一个直接子级)，FIGCAPTION (必须是 FIGURE 的第一个/最后一个直接子代)和 LI(UL/OL 的直接子代).

特别是DT/DD，我个人use UL 列表，每个 LI 中都有 DL:

<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 年 1 月 18 日): 事实证明规范确实 not DT/DD 允许多个嵌套的 DIV 包装器，因此该功能在实践中的用处实际上非常有限，UL →LI→DL 此处描述的方法仍然适用。