Utilizing the Underused (But Semantically Awesome) Definition List

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:

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?

Demo and Download

View Demo   Download Files