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

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

Solution 2:

there's a repo about dd-dt wrapping. According to the html spec whatwg it is OK to wrap each dd & dt with div tag inside DL.

<dl>
   <div>
     <dt>Bolster</dt>
     <dd>to support, strengthen, or fortify</dd>
   </div>
   <div>
     <dt>Capitalize</dt>
     <dd>to use to your advantage</dd>
   </div>
</dl>

Solution 3:

Here we are in 2018! CSS grid is well supported, and this offers yet another possible solution / workaround to the problem if the main goal is to control the positioning of the dt/dd...

HTML

<dl>
    <dt>Favorite food</dt>
    <dd>Pizza</dd>

    <dt>Favorite drink</dt>
    <dd>Beer</dd>
</dl>

CSS

dl {
    display: grid;
    grid-template-columns: min-content 1fr;
}

(You can tweak the values of grid-template-columns to match your specific design requirements.)

This doesn't "solve" the limitations of the spec, but I thought it helpful since you specifically mentioned concerns about semantic markup. As I mentioned above, there are limitations to what grid can do, but if the goal is to control the layout of the dt/dd I think this might be the most semantic way to do it that is still valid HTML.