Replacement for the DOA tag

Question

The DOA (or more appropriately, Dead Before Arrival) XHTML2 working standard indicates support for the <di> tag.

[...] The term and its definition can be grouped within a di element to help clarify the relationship between a term and its definition(s).

To clarify, this tag would be used to group <dt> and <dd> tags together under a <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>

Anyway, since <di> is out the window (heh), I was wondering what (if any) currently supported markup patterns could be described as semantically and structurally equivalent? I've essentially accepted that <dl> is not sufficient for my requirements (as far as aesthetic requirements go), so I'm on to looking at other solutions.

My intent for <di> was primarily a style hook¹, as I'm using a definition list and intend to style the term/definition groupings as a single item.

For the sake of accessibility, I will be using the aria-* and role attributes to help define the relationship, but I'm hoping that there exists some generally accepted structure to emulate <di>, that I simply haven't encountered.

For example, I'm considering something like the following:

<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. As I understand it, this is an oft-cited reason for its exclusion from HTML5 (that it is merely a style hook). Frankly, I think that's bull since it is a perfectly reasonable way to group terms and definitions for both aesthetic and parsing purposes. But who cares, right? Unquoted attributes and incomplete tags are far more important.</sarcasm>}

Answer 1

HTML5 CR defines a grouping within a dl element, so that e.g. a dd element followed by one or more dd elements constitutes a group, the next dd starts a new group etc. In this sense, the di element would be structurally redundant. On the other hand, a dl element has really no semantics (beyond being structurally something), and there is no known software that processes it in any particular way, beyond default rendering issues.

If you wish to style such a group as a unit, you are mostly out of luck, as per specs and drafts. There is no proposal being considered about adding anything like di. You might submit a proposal, referring to tbody and optgroup as precedents (i.e. as special-purpose grouping elements within specific elements), but that would be a long way.

A short way is to use div for grouping inside dl. Of course it’s “invalid”, but that’s just a formal position, and browsers don’t really care. They seem to digest this fine:

<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>

Browsers parse this so that div elements are children of the dl element, and the dt and dd elements still have their normal effect on default formatting.

And now you can style the units, e.g.

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

You may get flamed for this. A safer, duller approach is to make each unit a separate dl element (and wrap the dl elements in a div container if you need to deal with the all of them as a single element).