Search code examples
htmlsemantic-markup

Can I use sub-headings inside a definition list?

I am making a "definition of terms" page and want to group the terms based on topic, like terms about history or geography. Is it appropriate to use sub-headings such as <h2> within the <dl>?

<dl>

  <h2>Terms about history</h2>
  <dt>Term 1</dt>
  <dd>definition</dd>
  <dt>Term 2</dt>
  <dd>definition</dd>

  <h2>Terms about geography</h2>
  <dt>Term 3</dt>
  <dd>definition</dd>
  <dt>Term 4</dt>
  <dd>definition</dd>

</dl>

Solution

  • No, that’s not valid. A dl element may not contain a h2 element as child.

    You could use multiple dl elements:

    <h2>Terms about history</h2>

<dl>
  <dt>Term 1</dt>
  <dd>definition</dd>
  <dt>Term 2</dt>
  <dd>definition</dd>
</dl>

<h2>Terms about geography</h2>

<dl>
  <dt>Term 3</dt>
  <dd>definition</dd>
  <dt>Term 4</dt>
  <dd>definition</dd>
</dl>

    It would also be possible to use one dl element with two nested dl elements, but I wouldn’t recommend it, because it’s needlessly complex, and you can’t use actual headings:

    <dl>

  <dt>Terms about history</dt>
  <dd>
    <dl>
      <dt>Term 1</dt>
      <dd>definition</dd>
      <dt>Term 2</dt>
      <dd>definition</dd>
    </dl>
  </dd>

  <dt>Terms about geography</dt>
  <dd>
    <dl>
      <dt>Term 3</dt>
      <dd>definition</dd>
      <dt>Term 4</dt>
      <dd>definition</dd>
    </dl>
  </dd>

</dl>