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.

Here's a list of pseudo-classes, marked up with a description list:

<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! ❤️