I get a geeky sense of enjoyment from finding uses for HTML’s
dl element. I think part of it comes from my desire to categorize and describe things. There are 2 variations on the same use case that I typically come across.
The first is for defining a list of contact info for a website. Think email, business hours, phone, fax, etc. The second is for defining a personal staff profile. Think name, contact info, website, etc. The description list syntax is straight forward. First, you have your
<dl> element, aka the definition list. This is analogous to an ordered or unordered list (
<ul> respectively). Then it’s followed by a set of term and definition elements (
I have a particular way I like to style description lists when used like this. However, since I actually need to implement this pattern somewhat infrequently, I find myself inspecting the elements of the last time I implemented it to refresh my memory. So, I created a little reference pen with the styling I’ve always used:
There are some more complicated usages of description lists that you can read more about here.