8

DOA(或更恰当地说,Dead Before Arrival)XHTML2 工作标准表明了<di>标签的支持。

[...] 可以将术语及其定义分组到一个di元素中,以帮助阐明术语与其定义之间的关系。

澄清一下,此标签将用于在 a 下进行分组<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>主要是样式挂钩1,因为我正在使用定义列表并打算将术语/定义分组设置为单个项目。

为了便于访问,我将使用aria-*androle属性来帮助定义关系,但我希望存在一些普遍接受的结构来 emulate <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>

4

1 回答 1

4

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

如果您希望将这样的组设计为一个单元,那么根据规范和草稿,您大多不走运。没有考虑添加类似di. 您可能会提交一份提案,引用tbodyoptgroup作为先例(即作为特定元素中的特殊目的分组元素),但这将是一个漫长的过程。

一种简短的方法是使用divfor group inside dl。当然它是“无效的”,但这只是一个正式的立场,浏览器并不关心。他们似乎很好地消化了这一点:

<dl>
    <div>
        <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>
    </div>
    <div>
        <dt>pragmatic HTML</dt>
        <dd>using markup according to how things actually work in browsers
            and other relevant software</dd>
    </div>
</dl>

浏览器对此进行解析,以便div元素是元素的子dl元素,并且dtanddd元素仍然对默认格式具有正常影响。

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

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

你可能会因此而发火。一种更安全、更枯燥的方法是让每个单元成为一个单独的元素(如果您需要将所有元素作为单个元素处理,则将这些元素dl包装dl在一个容器中)。div

于 2014-01-07T22:19:46.653 回答