Description Lists

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 (<ol> or <ul> respectively).  Then it’s followed by a set of term and definition elements (<dt> and <dd> respectively).

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.

Happy coding!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s