Is there a valid way to wrap a dt and a dd with an HTML element?
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>
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.