Is there a valid way to wrap a dt and a dd with an HTML element?

Question

I wish HTML could do something semantically equivalent to this;

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

However, since the closest I've come is something I'm not 100% satisfied with the semantics of;

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

I was wondering if anyone has any other ideas of how you might do this?

Also, the reason the items would be grouped is because they are visually grouped in the content that is being marked up. Imagine a dictionary page, with a single definition list, where each definition is in an inset box that is floated left. I run into this situation all the time.

Answer 1

No, Ian Hickson (HTML spec editor) is convinced that this is a CSS problem, not an HTML one:

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

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

At the same time, fantasai (CSS spec editor) is convinced in 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-trivial thing to implement, and a comparatively confusing thing to use.

Nevertheless, Ian apparently ignores that and continues to be detached from reality.

There are same problems with LEGEND (that must be first direct child of FIELDSET according to HTML spec), FIGCAPTION (that must be first/last direct child of FIGURE), and LI (direct child of UL/OL).

As for DT/DD in particular, I personally use UL list with DL inside each of LI:

<ul>     <li><dl>         <dt>Lorem</dt>         <dd>Lorem definition</dd>     </dl></li>      <li><dl>         <dt>Ipsum</dt>         <dd>Ipsum definition</dd>     </dl></li> </ul> 

So we have DL to make relation between DT and DD, and UL list to make them all belong to one list.

Update (2016-11-14): The HTML standard (WHATWG version for now) now (since 2016-10-31) allows the DIV element (optionally intermixed with so-called script-supporting elements SCRIPT, TEMPLATE) to be direct children of DL elements. W3C’s HTML validator does not account for this change yet, but the experimental HTML5.org validator does.

Update (2017-01-18): Turns out the spec does not allow more than one nested DIV wrapper for DT/DD, so usefulness of the feature in practice is actually very limited and the UL→LI→DL approach described here is still relevant.