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