The description list element (<dl>)

You probably know about the ordered and unordered list elements. But do you know about the description list element? I've known about it for a while, but I only had cause to use it for the first time yesterday.

The description list element represents a list of terms and their descriptions. The enclosed terms are represented by description term elements, while their descriptions are represented by description details elements.

Yesterday’s post about pseudo-classes vs pseudo-elements provided the perfect use case. I needed to show a list of pseudo-classes together with their short descriptions. Enter the <dl> element!

<dl>

  <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:active">
      <code>:active</code>
    </a>
  </dt>

  <dd>Applies when a user activates a link (e.g. by clicking).</dd>

  <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">
      <code>:hover</code>
    </a>
  </dt>

  <dd>Applies when a user hovers over a link with their cursor.</dd>

  <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link">
      <code>:link</code>
    </a>
  </dt>

  <dd>Applies to links that the user has not yet visited.</dd>

  <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited">
      <code>:visited</code>
    </a>
  </dt>

  <dd>Applies to links that the user has already visited.</dd>

</dl>

Hopefully this gives you an idea of how you can use the <dl> element in your next project. If it’s the most semantic choice, go for it! ❤️


If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!