Valid html tag to group definition list items.

Question

I currently have:

<dl>

  <span class="wrapper">

    <dt>A title</dt>
    <dd>A description</dd>

  </span>

  <span class="wrapper">

    <dt>A title</dt>
    <dd>A description</dd>

  </span>

</dl>

This (or divs instead of spans) doesn't validate. Is there anything I could wrap it with that would?

Answer 1

You don't need to "group" them. They are grouped by virtue of their relative positions in the <dl>. In HTML, the next-sibling relationship is a strong one.

Answer 2

<dt> and <dl> are the only valid elements inside a definition list.

If you're having trouble styling it yet still want to be semantic I could suggest multiple work-arounds for either a different element structure or a way to work the CSS to achieve the desired look. Just let me know what exactly you're trying to do.

Answer 3

No. A dl allows only two kinds of children: dt and dd. See this article for a longer explanation.

In short: the reason why dt and dd aren't "grouped" is that you can have one or more dt elements per dd.

If you really need to group, then your only option is to build the list manually using divs with the necessary CSS.