替换DOA <di>标签

Question

该DOA(或者更准确,死之前到达)XHTML2工作标准表示支持的<di>标签.

[...]该术语及其定义可以在一个di要素中分组,以帮助澄清术语与其定义之间的关系.

为了澄清,此标记将用于在以下位置分组<dt>和<dd>标记<dl>:

<dl>
    <di>
        <dt>defenestrate</dt>
        <dd>throw through or out of the window; "XHTML2 was defenestrated"</dd>
        <dd>what I will do if web standards keep going they way they are</dd>
    </di>
</dl>

无论如何,既然<di>是在窗外(嘿),我想知道当前支持的标记模式是什么(如果有的话)可以被描述为语义和​​结构上的等价？我基本上接受了这<dl>不足以满足我的要求(就美学要求而言),所以我正在研究其他解决方案.

我的意图<di>主要是一个样式钩子¹,因为我正在使用一个定义列表,并打算将术语/定义分组设计为单个项目.

为了便于访问,我将使用aria-*和role属性来帮助定义关系,但我希望存在一些普遍接受的模拟结构<di>,我根本没有遇到过.

例如,我正在考虑以下内容:

<ul>
    <li>
        <dfn id="term-1">term</dfn>
        <p aria-labelledby="term-1">definition for term 1</p>
        <p aria-labelledby="term-1">another definition for term 1</p>
    </li>
    <li>
        <dfn id="term-2">term</dfn>
        <p aria-labelledby="term-2">definition for term 2</p>
        <p aria-labelledby="term-2">another definition for term 2</p>
    </li>
</ul>

_{1.据我了解,这是一个经常被引用的原因,它被排除在HTML5之外(它只是一个样式钩子).坦率地说,我认为这是公牛,因为它是一种非常合理的方式,可以为美学和解析目的分组术语和定义.但谁在乎呢,对吧？不带引号的属性和不完整的标签更为重要.</sarcasm>}

Answer 1

dlHTML5 CR 定义了元素内的分组，因此，例如，一个dd元素后面跟着一个或多个dd元素构成一个组，下一个元素dd开始一个新组等。从这个意义上说，该di元素在结构上是冗余的。另一方面，dl元素实际上没有语义（除了结构上的东西之外），并且除了默认渲染问题之外，没有已知的软件可以以任何特定方式处理它。

\n\n

如果您希望将这样的一组设计为一个整体，那么根据规范和草案，您大多不走运。目前还没有考虑添加类似di. 您可以提交一项提案，参考tbody并optgroup作为先例（即作为特定元素内的特殊用途分组元素），但这将是一个漫长的过程。

\n\n

一种简短的方法是用于div内部分组dl。当然是\xe2\x80\x99s \xe2\x80\x9cinvalid\xe2\x80\x9d，但是\xe2\x80\x99s只是一个正式的位置，浏览器并不真正关心\xe2\x80\x99。他们似乎消化了这个罚款：

\n\n

<dl>\n    <div>\n        <dt>defenestrate</dt>\n        <dd>throw through or out of the window; "XHTML2 was defenestrated"</dd>\n        <dd>what I will do if web standards keep going they way they are</dd>\n    </div>\n    <div>\n        <dt>pragmatic HTML</dt>\n        <dd>using markup according to how things actually work in browsers\n            and other relevant software</dd>\n    </div>\n</dl>\n

\n\n

浏览器会解析此元素，以便div元素是该dl元素的子元素，并且dt和dd元素仍然对默认格式具有正常效果。

\n\n

现在您可以设置单位的样式，例如

\n\n

<style>\ndl > div { border: solid red 1px; margin-bottom: 0.6em; }\n</style>\n

\n\n

你可能会因此而受到批评。一种更安全、更乏味的方法是让每个单元成为一个单独的dl元素（如果需要将所有元素作为单个元素处理，请将这些dl元素包装在一个容器中）。div

\n