61

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.

Jo Sprague
  • 16,523
  • 10
  • 42
  • 62
  • 8
    There's no 'syntactically valid,' or even 'valid at all' way to wrap a `dt` and `dd` together; the *only valid* children of a `dl` are `dt` and `dd`. – David Thomas Jun 04 '12 at 00:40
  • I understand that it's not valid. What I'm wondering is, how would people semantically group together a single dt/dd pair as one "definition item", since, semantically, you could make an argument that a definition is a semantic child of a "definition list", itself having children of dt/dd. – Jo Sprague Jun 04 '12 at 16:23
  • 2
    @JosiahSprague — You'd put the `
    ` element after the `
    ` element and before any other `
    ` elements.
     – Quentin Jun 04 '12 at 16:33
  • 2
    Quentin, that doesn't wrap them in a definition element that can be easily manipulated as one in the DOM. – Jo Sprague Jun 04 '12 at 16:35
  • @JosiahSprague — No, it doesn't. As David Thomas said, there is no way to do that. – Quentin Jun 04 '12 at 16:36
  • I've updated the wording of my question to be more clear – Jo Sprague Jun 04 '12 at 16:41
  • 4
    There was a proposal to do exactly that in XHTML 2.0. [The `` element](http://www.w3.org/TR/xhtml2/mod-list.html#edef_list_di). But XHTML 2.0 never made it, so your request is off. Edit: Ha, I see you're quoting from that page already. Oh well. – Mr Lister Jun 04 '12 at 16:45
  • Interesting fact about in XHTML 2.0. I never knew that. I wonder if any browsers ended up implementing that. *off to test* – Jo Sprague Jun 04 '12 at 20:33

3 Answers3

77

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.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
  • 4
    I love this idea. It's not semantically perfect, but as you stated, the spec doesn't really allow for that. This is the most semantic idea I've heard so far. Thanks for your thoughts! – Jo Sprague Jun 13 '12 at 23:47
  • 3
    The HTML spec has now changed and allows `div` in `dl`. https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element – zcorpan Nov 13 '16 at 23:20
  • @zcorpan Wow, thanks, Simon. That’s a sort of paradigm shift in the HTML world. Too bad the change is very narrow and solely about grouping `DT`/`DD` elements, while generic containers are still _not_ allowed _everywhere_ — e.g. for wrapping `LEGEND` and `FIGCAPTION`. I would prefer this to be solved on CSS side though, since that would allow to have different sets of grouped elements depending e.g. on media queries, but having this at least in HTML and at least for `DT`/`DD` is anyway better than nothing. – Marat Tanalin Nov 14 '16 at 13:57
  • You can use https://checker.html5.org/ instead, it has the dl-div change implemented. It is more up-to-date and tracks the WHATWG spec rather than the W3C one where there are differences. – zcorpan Nov 14 '16 at 23:33
  • If an idea is difficult to spec and implement, two (of many) possibilities are 1-the idea is bad 2-the underlying technology is too rigid. As for definition lists, a container around `dt` & `dd` does not add much semantic value and makes me think Ian is not so "detached from reality" – Doug Jul 13 '18 at 18:47
  • 1
    @Doug The point is that CSS people say this is an HTML issue, while HTML people say this is a CSS issue. So we have a vicious circle here. I would prefer a CSS solution since it would allow to have different layout depending on e.g. Media Queries which HTML with hard-coded containers is not capable of. But an HTML solution would be _better than nothing_. – Marat Tanalin Jul 14 '18 at 15:33
  • @Doug: Semantically, while a container inside `dl` may not add a whole lot of value, _some_ way to tie `dt` and `dd` together would be extremely valuable. `dt` probably should've always **been** a container for `dd`, because that's how it's described: "Zero or more groups each consisting of one or more `dt` elements followed by one or more `dd` elements" ([src](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)) — sure sounds like a container to me! And things like multi-column `dl` lists are a nightmare right now, with `dt`+`dd` groups getting chopped up willy-nilly by col breaks. – FeRD Feb 06 '19 at 06:04
  • 1
    I think it's very important to keep in mind that when we're talking about "Specifications" there's two sources. WHATWG is "less official" than W3C (depending on who you're talking to). HOWEVER. As of October 2017, wrapping a set of
    and
    tags with a
    tag is acceptable both according to WHATWG ( https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element ) and W3C ( https://www.w3.org/TR/html5/single-page.html#the-dl-element ).
     – The E Mar 04 '19 at 15:59
16

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>
Rachelbt
  • 357
  • 3
  • 8
7

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.

emersonthis
  • 32,822
  • 59
  • 210
  • 375