title: Replacement for the DOA <di> tag
body: <p>The DOA (<em>or more appropriately, Dead <strong>Before</strong> Arrival</em>) XHTML2 working standard indicates support for <a href="http://www.w3.org/TR/xhtml2/mod-list.html#sec_11.1." rel="nofollow">the <code>&lt;di&gt;</code> tag</a>.</p>
  
  <blockquote>
    <p>[...] The term and its definition can be grouped within a <code>di</code> element to help clarify the relationship between a term and its definition(s).</p>
  </blockquote>
  
  <p>To clarify, this tag would be used to group <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> tags together under a <code>&lt;dl&gt;</code>:</p>
  
  <pre><code>&lt;dl&gt;
      &lt;di&gt;
          &lt;dt&gt;defenestrate&lt;/dt&gt;
          &lt;dd&gt;throw through or out of the window; "XHTML2 was defenestrated"&lt;/dd&gt;
          &lt;dd&gt;what I will do if web standards keep going they way they are&lt;/dd&gt;
      &lt;/di&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>Anyway, since <code>&lt;di&gt;</code> is out the window (<em>heh</em>), I was wondering what (<em>if any</em>) currently supported markup patterns could be described as semantically and structurally equivalent? I've essentially accepted that <code>&lt;dl&gt;</code> is not sufficient for my requirements (<em>as far as aesthetic requirements go</em>), so I'm on to looking at other solutions.</p>
  
  <p>My intent for <code>&lt;di&gt;</code> was primarily a style hook<sup>1</sup>, as I'm using a definition list and intend to style the term/definition groupings as a single item.  </p>
  
  <p>For the sake of accessibility, I will be using the <code>aria-*</code> and <code>role</code> attributes to help define the relationship, but I'm hoping that there exists some generally accepted structure to emulate <code>&lt;di&gt;</code>, that I simply haven't encountered.</p>
  
  <p>For example, I'm considering something like the following:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;dfn id="term-1"&gt;term&lt;/dfn&gt;
          &lt;p aria-labelledby="term-1"&gt;definition for term 1&lt;/p&gt;
          &lt;p aria-labelledby="term-1"&gt;another definition for term 1&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;dfn id="term-2"&gt;term&lt;/dfn&gt;
          &lt;p aria-labelledby="term-2"&gt;definition for term 2&lt;/p&gt;
          &lt;p aria-labelledby="term-2"&gt;another definition for term 2&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><sub>1. As I understand it, this is an oft-cited reason for its exclusion from HTML5 (<em>that it is merely a style hook</em>). Frankly, I think that's bull since it is a perfectly reasonable way to group terms and definitions for both aesthetic <em>and</em> parsing purposes. But who cares, right? Unquoted attributes and incomplete tags are far more important.<code>&lt;/sarcasm&gt;</code></sub></p>