Search code examples
htmlsemantic-markup

description list : grouping <dt>and its "child" <dd>?


HTML5 has nice tags for description. w3.org gives the following example:

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

, describing the contexts in which <dd> element can be used as "After dt or dd elements inside dl elements".

This strikes me (, a complete beginner) as strange: shouldn't these dd elements somewhat belong to the dt which they are describing? Because <dt>happiness</dt> and <dd> The state of being happy</dd> are definitely related to each other, one describing another? With dt and dd aligning without structure, the only way to tell what a specific dd describes is to find the last dt. I'd feel much safer with something like (di for each item)

<dl>
  <di>
    <dt><dfn>hapiness</dfn></dt>
    <dd class="pronunciation">/'hæ p. nes/</dd>
    <dd>The state of being happy</dd>
  </di>
</dl>

Although I'm tempted to ask "Am I right worrying this?", my questions are:

  • What are the conventions when using dl in html5? Do they group <dt> and <dd> in some way or another, or is it just fine as it is?
  • If I am to group them (like above, but using the standard tags), is there any tag I can use semantically?

Solution

  • As far as I know - a <dd> is the definition for its immediate preceding <dt>. Technically you wouldn't have more than one <dd> per <dt>. Do something like this:

    <dl>
      <dt>happiness</dt>
      <dd>
        <span class="pronunciation">/'hæ p. nes/</span>
        <span class="definition">The state of being happy</span>
      </dd>
    </dl>
    

    and then style the spans accordingly.

    EDIT:

    My apologies, as David Thomas pointed out, it is okay to have more than one <dd> per <dt> (http://html5doctor.com/the-dl-element). I think the main idea I have here is that I still think it would be neater, and easier to style if the <dd> was split up into sections as above.