A visual example.
Let’s take a look at an example of a bit of content:

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="/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="/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 a <p> 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?
“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.
@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.
@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.
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.
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.
@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
By the way, Chris your new footer rocks :)
“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.
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
good read!
thx ppl.
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.
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.
@Chocopunk – I would personally not suggest using a UL, LI etc in a definition list, that just seems too messy and unsemantic
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!
i never used definition lists before, but after your article i will try to use it more.
thx for the hint!
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)
Nice read. I’ve never used DL, DT or DD before.
Definition Lists rock :)
Nice read, i will try this method next time im developing.
Great job Chris
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.
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.
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.
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?
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
is DL an HTML5 tag? If so is it compatible with previous visions of HTML?