Semantic HTML markup of DT
/DD
groups
- Published:
Sometimes, it is needed to apply styles to each group of DT
/DD
elements integrally.
But wrapping DT
and DD
elements in a common container like DIV
is disallowed by the HTML specification: DL
is the only valid parent element of these elements.
In such cases, each such group should be put into its own separate DL
element, and to keep adjacent groups belonging to a single semantic sequence, each such DL
may be put into a LI
element of a regular unordered list UL
:
<ul>
<li><dl>
<dt>Foo</dt>
<dd>Bar</dd>
</dl></li>
<li><dl>
<dt>Lorem</dt>
<dd>Ipsum</dd>
</dl></li>
</ul>
Update: starting from , the HTML spec allows wrapping DT
/DD
in DIV
, but for now, it is allowed to use not more than one nested DIV
, so usefulness of the feature in practice is very limited and the approach described here is still relevant.