Grow your CSS skills. Land your dream job.

Utilizing the Underused (But Semantically Awesome) Definition List

Published by Chris Coyier

A quick intro to semantics

When we talk about semantics in HTML, we are talking about how HTML tags are used to describe the content. Good semantics means that the tags are being used well to describe the content. Bad semantics means that the tags being used poorly describe the content. Good semantics doesn't necessarily mean that the least possible number of tags are used, only that the ones that are used make sense and, just as importantly, make sense used together. Bad semantics doesn't necessarily mean that you used tags improperly either, that refers more to syntax.

A visual example.

Let's take a look at an example of a bit of content:

example1dl.png

Semantically, one way to think about this content is in two related chunks. One chunk is called "Track your expenses" and has some descriptive data, the other is called "RSS Feeds" and has some descriptive data. Keep that in mind and then look at this code:

<div class="chunk">
	<h4>Track your expenses</h4>
	<img src="http://cdn.css-tricks.com/images/paper_small.gif" alt="" class="left"/>
	<p>Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</p>
</div>
<div class="chunk">
	<h4>RSS Feeds</h4>
	<img src="http://cdn.css-tricks.com/images/rss_big.jpg" alt="" class="left"/>
	<p>Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</p>
</div>

Semantically, this is incorrect.

Even though this code is pretty clean and will work just fine, semantically it is a departure from our original thoughts. There are two things wrong. For one, the div's separate the chunks independently instead of keeping them together. Two, the "description" has been broken up into an img element and an paragraph element, instead of being kept together.

Definition list to the rescue.

OK OK. We rigged the example. This just so happens to be a perfect scenario for a definition list. Definition lists consist of three different tags:

  • <dl>: Container
  • <dt>: Definition Term (like a title)
  • <dd>: Definition Description

Now let's take a crack at re-writing this content using definition lists. We know we can wrap the whole thing in a container now keeping everything together. We know we can set the titles as Definition Terms. But what about that description? The best way, semantically, would be to include all of that into a single Definition Description element...and we can! The only hiccup is that the images change between chunks, so we'll need to apply a unique class to the <dd> elements.

<dl>
	<dt>Track your expenses</dt>
	<dd class="chunk_divide">Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</dd>

	<dt>RSS Feeds</dt>
	<dd class="chunk_rss">Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</dd>
</dl>

These tags give you plenty to style in your CSS.

dt {
	font-weight: bold;
}
dd {
	background:none no-repeat left top;
	padding-left: 50px;
}
dd.catchPhrase1 {
	background-image:url('../img/paper_small.gif');
}
dd.catchPhrase2 {
	background-image:url('../img/stats.gif');
}

Couldn't I do this with an unordered list?

Sure you could. But lists can only contain list elements, so the title and the description will not be semantically described as well as with a definition list. Heck, you could do this with a table, with div's, with any number of HTML elements, but none of them will make quite as much semantic sense as a definition list in this case.

What else can they do?

I'm glad you asked, because this example doesn't take advantage of all that definition lists have to offer. Another major strength is that within a definition list you can use multiple terms or multiple descriptions, it doesn't matter! Let's think of some examples.

DT: Website link
  DD: Description of website

DT: Upcoming Gig
  DD: Date
  DD: Venue
  DD: Cover Charge

DT: Pseudonym #1
DT: Pseudonym #2
  DD: What it means

DT: Recipe
  DD: Ingredient
  DD: Ingredient
  DD: Instructions

Once you start really thinking about it, there are so many practical examples of definition lists it is kind of surprising you don't see them in code very often.

Why aren't definition lists in more widespread use?

It's hard to say... I think probably the biggest reason is Search Engine Optimization. People know (or think they know) that header tags give extra weight and importance to content. Used properly, your term tag replaces the need for a header tag I assume people think that means they will get less search engine juice out of their content. I am not going to speak either way on this issue since I'm no SEO genius, but my gut feeling is that you will never be penalized for well marked up code.

Another limitation is that you can't use block level elements within the <dt> element. It's like header elements (e.g. <h1>) in that way. (hat tip Paul O'Brien)

Further reading.

Definition lists - misused or misunderstood?

Demo and Download

View Demo   Download Files

Comments

  1. Permalink to comment#

    “header tags give extra weight and importance to content” – could you include a header tag within the dt? For example, Title or would this be invalid? I have to admit, I’d never even heard of definition lists until I started reading here.

  2. Volkan Görgülü
    Permalink to comment#

    @Lazlow: Defition Lists are not so popular like Unordered Lists and Ordered Lists but they do exist.

    You define the title of your definiton with DT tag, you do not need to put another Header tag within.

  3. @Lazlow – Just to add on to what Volkan said definition lists cannot contain block elements, this eliminates heading elements and is why the DT tag is used for the title.

  4. Good example…

    You are right definition lists are not used much at all. I remember a while back I used them for the first time and boy how easy it was to use and stylise.

  5. Thanks for giving the definition list some love! I don’t see it used a lot and I wonder if it’s because people don’t like it or if they just don’t know about it. The more examples of semantic uses for it, the better.

  6. @Matt – I think people do not use it because they dont know of it and how best to be used. Unordered lists are used more frequently because of them being used for menus.

    btw your submit button does not show up in my IE7

  7. Volkan Görgülü
    Permalink to comment#

    By the way, Chris your new footer rocks :)

  8. Permalink to comment#

    “Another limitation is that you can’t use block level elements within definition lists”

    Just for clarification – you can’t use block elements only in dt not dd.

  9. Permalink to comment#

    Hi, a few time ago, while using definitions lists, i read somewhere that it was not appropriate to give a dt more than one dd.
    They recommanded to put a ul instead like this:

    DL
    DT
    DD
    UL
    LI
    LI
    LI
    UL
    DD
    DL

    What do you think of it ?

    found the link: http://tinyurl.com/9sd68

  10. good read!
    thx ppl.

  11. Permalink to comment#

    Great post. I use definition lists all the time, because they are the only way you can express a name=value pair relationship in markup. I’ve even used them to mark up a single pair of elements, such as a photo and accompanying caption, though admittedly that may be stretching it a bit. I believe that’s a proposed microformat as well.

  12. Very good post, I “Stumbled” to this post and love the fact that you are giving love to DL.

    Also, if I may add, I had to explain the semantic reasoning behind the DL to a client the other week. They wanted me to set it up like:

    <h1>title</h1>
    <p>text</p>

    for the search engine. Now, that can work, but this was not going to be in the main content area or in the header, no this was going to be in the fair right column, this was a four column design, and really was not a attention grabbing section. So, on top of explaining why the DL was semantically correct, I also had to explain why using an H1 with any other place other then the header, really was not semantically. What I finally did was code out an example page using both and turned the styles off; that opened his eyes a bit.

    Anyway, very good post, sorry for the long comment. I will be bookmarking your site.

  13. @Chocopunk – I would personally not suggest using a UL, LI etc in a definition list, that just seems too messy and unsemantic

  14. BulletProofPoet
    Permalink to comment#

    I’ve never used definition lists as I don’t care for the way the separate definitions aren’t grouped. Instead they’re just lumped together within the <dl>. If the definition list contained a number of container elements (e.g. <di>, similar to a list’s <li>) which grouped the separate <dt> and <dd> pairs, it would be more structured and make more sense to me.

    But I guess that it doesn’t really matter that much..! More investigation required, I think!

  15. i never used definition lists before, but after your article i will try to use it more.
    thx for the hint!

  16. Your semantics arguments are a bit off.

    The first case is perfectly semantic. A heading is designed to lead a section of content. You said it was incorrect because they weren’t grouped, but they are grouped by relative-location to one another, and if that wasn’t enough, they are grouped by their parent element (for instance, you could define a div above this group). While not ideal, a list element is a better solution, but it is never less a semantic solution.

    Also of interest is the fact that you don’t have to limit to DL list to one DT or DD per item – it’s not Key-Value pairs.

    You could for instance do a
    DT (Section title)
    DD (Image)
    DD (Paragraph)

  17. Chris
    Permalink to comment#

    Nice read. I’ve never used DL, DT or DD before.

  18. Permalink to comment#

    Definition Lists rock :)

  19. Nice read, i will try this method next time im developing.

    Great job Chris

  20. A Twitter friend sent me this post after I started looking into definition lists. I obviously should be using them for more of my posts, since I often do the “expanded” list thing on my blog.

    Thanks for the excellent overview! I’m definitely going to have to play around with them.

  21. Robot
    Permalink to comment#

    Definition lists might be used more often if DL, DT, and DD buttons were included into cms editors like tinyMCE. Most of the marcoms I’ve had to work with know very little code, so going into the text portion of the editor to create and edit a DL is out of the question. Even with these buttons, they would have to select at least two items, click the DL button, deselect, select the first item and click DT, and select the second item and click DD. Not gonna happen.

    Bottom line: if I organize content for a client using a definition list, there is a good likelihood it will not be maintained properly.

    Having said that, I (that’s an italic I) think they are great.

  22. Simon
    Permalink to comment#

    Hi Chris. Delighted that you make your knowledge freely available. I have made every mistake in the book over the years. Now your site is my first port of call when I am trying something new – or trying to do the same old stuff – better. Thanks.

  23. Permalink to comment#

    A colleague used DL’s and it was my job to conditionally hide one dt/dd pair with JS based on the value of an input. I found that somehow setting display:none for these wasn’t working (even with !important), and the only work-around I found is pretty excessive: http://stackoverflow.com/questions/6988945/hide-show-dd-elements-in-a-definition-list

    So, this is one downside of using DL’s, and officially I’m sticking with tried-and-true div’s and ul’s. Unless, does anyone have a graceful method to hide definition list pairs dynamically?

    • Permalink to comment#

      CORRECTION! Ignore everything I mentioned above… My issue was with the JS, not the dl… Looks like dl’s may be something to consider after all

  24. Permalink to comment#

    is DL an HTML5 tag? If so is it compatible with previous visions of HTML?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".