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