I love definition lists
I think definition lists have to be my favorite single HTML element. I love them because so much data fits into the definition list format. And, the definition list has a lot of styling options. I thought I would take a moment to share some of the various ways I stylize definition lists.
I suppose before we delve into the various applications and styling options of a definition list, we should look at the default appearance and declared intention for the mark up. Definition lists, as their name implies, are intended for data sets that a list of titles and paired descriptions, such as definitions and FAQs. I tend to look at the definition list as any data that needs to be presented in a list and can have a title/description relationship. The W3C has an official definition of a definition list.
The definition list components
One of the main reasons why I am motivated to write about definition lists is that they seem to be rarely used. I think most people don’t use them because they don’t know what a dl is. Here are the basic parts:
- The opening and closing
<dl></dl>tags - These tags start and stop the definition list.
- The
<dt></dt>tag - This is the title tag for an individual item in the definition list. This can be the word the needs a definition. It could be the question in an FAQ. Or it could be used as a headline for an item in a list.
- The
<dd></dd>tag - This is the definition. It could also be used for the answer in an FAQ. The
<dd>tag can have multiple entries for each<dt>tag. Meaning, if you use a<dt>tag, you could follow it with as many<dd>tags as you would like.
Definition list applications
There are myriad types of data that can be structured with a definition list. Here’s a list of examples to get your definition list usage going:
- Definitions
- This is what the element was created for—pairing words with their respective definitions. This means glossaries, dictionaries, terms, or wherever you have a list of things to define.
- Questions and Answers
- Another classic datum pair, the Q&A fits snuggly into a definition list.
- Frequently Asked Questions
- Similar to the Q&A, the FAQ also loves to be structured in a definition list.
- Examples
- This list, for example, is a definition list.
<dl>s are a great way to present a series of related examples giving the reader a title for quick scanning and a description for deeper analysis on the points they care about. - Product/Services
- Products and services can be presented as definition lists. You can use the product or service name in the
<dt>and then list as many data points about the item as you want. For example, you could use different classes on multiple<dd>for each data point. Like the description could be a different class from the price or size. I like this better than using a bunch or spans or a headline and<ul>. - Addresses
<dl>s offer great structure for a list of addresses. A store’s name could be the<dt>and the rest of the address could be structured as<dd>- More
- There are many more ways to leverage the definition list. Look for listed data that has a title and descriptive data that follows and you’ve got a candidate for a definition list.
I’ve wrestled with and have been asked why favor a definition list over a series of headlines and paragraphs. I think for me it comes down to two things: 1) Definition lists tie the listed items together into a set in a way headlines and paragraphs can’t, which is great for establishing context; and 2) It preserves the preciousness of the headlines from over use and I think makes the keywords in the headlines more valuable. I also like <dl>s because I can style them differently from my headlines, which makes my content easier to digest for the reader.
Styling options
One of the things I love about definition lists is their flexibility with styling. Here are a few examples of how a definition list can be styled:
- Default
- This is how your browser renders a definition list by default. Most will bold the
<dt>and indent the<dd>with margin below each item.
- Emphasizing the title
- If you’d like to make sure the title standouts, you can add additional style to the title. A few popular things to do to the title are bold, all caps, color, overline, underline, etc.
- Floating the
<dd> - This is a great technique for definition lists that have long
<dd>content. It saves on page real estate by floating the title to the left.
- Varying the
<dd>style - If you have multiple
<dd>s, you might be interested in styling them differently. Product data is a great example for varying the stylizing on<dd>s. -
<dl>
<dt>Product Name</dt>
<dd class="price">$20</dd>
<dd class="description">This is the product's description. It will tell you in prose some more detail about the product.</dd>
<dd class="sku">ITEM12345</dd>
<dd class="add">Add to cart</dd>
</dl>
Do you use definition lists? Do you love them? What’s your favorite HTML element?
i honestly have never known what dl’s were before this post.
no joke. thank you.
xoxoxo,
helen beverville skunkstun
From mr. diggles on October 18th, 2007 at 11:45 pm
Do you love them now?
From Justin on October 19th, 2007 at 3:12 pm