This guest article was written by Chris Coyier of CSS-Tricks, a site featuring tips, tricks, and tutorials on web design.
Unordered lists seem to get all the love these days, but there are just some things that are better semantically described with definition lists. Never heard of them? I’m not surprised. Here is the basic syntax:
<dl>
<dt>Definition Term</dt>
<dd>Definition Description</dt>
</dl>
There are two big differences between unordered lists and definition lists. One, there are two different elements that belong in a definition list: dt’s & dd’s. In unordered lists, all you have is li’s. Two, the only default styling applied to definition lists is a bit of a left-margin to the dd elements — no bullets or other strange positioning to fight.
Having two different tags to work with is what makes definition lists valuable. Take for example the need to create a FAQ’s page with a bunch of questions and their answers. Each question and answer group would really benefit from having a parent element, because then you could, for example, control the spacing between them or perhaps apply a border to visually separate them.
Many people would go straight for the div. With something like:
<div class="qa">
<h4>Question</h4>
<p>Answer</p>
</dl>
The problem with this is that div’s are very commonly used. Chances are, your page is already using several so it’s likely you will need to apply an unique class to the div to style it individually.
Other people will go straight for the unordered list:
<ul>
<li class="question">Question</li>
<li class="answer">Answer</li>
</ul>
The problem with this is that since you only get li elements in your ul, you will need to apply unique classes to them in order to get different styling.
I propose that the best elements to use for something like question/answer content is the definition list:
<dl>
<dt>Question</dt>
<dd>Answer</dt>
</dl>
Will using a div or an ul work? Sure, they’ll work just fine and nobody is going to slap your hand for using them. But if you want to be a super hip semantics junkie, you’ll use a definition list. You get all the advantages: a parent element for styling the whole group and different tags for the question and answer so they can be styled separately without needing to use unique classes. If needed, you can also use multiple dt’s and dd’s and use them in any order you wish.
Check out this example of a question and answer list using definition lists (click the image to see a live example):
On April 21, 2008
4:11PM
Richard said:
That’s a really cool trick and perfect for FAQ’s. I will be implementing an FAQ on a site shortly so I will definitely give this a try. As ever it makes perfect sense.
On April 22, 2008
12:10AM
mooty said:
This is a cool trick, I’ve never really used dt’s before, don’t know why, never really known what they did, and always struggled with ul’s to get things to work.
i’ve been a web designer for 3 1/2 yrs and this is news to me. cheers
On April 22, 2008
7:50AM
mardulia said:
Good idea. Two things. I think you’d better look at your mark-up carefully. There are a couple of end tags that aren’t closed properly. Bu maybe you’ve seent that already.;-)
Technically I suppose you could enclose the entire QA of your example in a single couldn’t you, and give that an id. Yes?
On April 22, 2008
7:51AM
mardulia said:
Sorry that last should read-
“Technically I suppose you could enclose the entire QA of your example in a single dl couldn’t you, and give that an id. Yes?”
On April 23, 2008
4:29PM
Edwin said:
Great article, I never used defenition lists before. Heard of it, but never saw the advantage of it. This is a very good example to show how to use them good :)
On April 27, 2008
12:11AM
Morpheus said:
Good technique but then, unlike in “ol”, where numbers are dynamic/automatic, this technique now forces you to Manually enter the question Numbers to the list.
If you re-order the qstns or delete a qstn, then you need to manually re-number the rest of the entries which can be a lot of work. Unless write a script that does the numbering for u (which again is work).
On April 30, 2008
12:29PM
Paul Irish said:
It’s a horrible idea to wrap each pair/set in a DL.. The DL should be around all DT/DD sets, not each in particular.
Bad bad!
On April 30, 2008
3:23PM
JuG said:
As Paul Irish said !!!
On May 01, 2008
9:26AM
NortelNetworks said:
Technically, if you wanted numbers, you could put each QA within it’s on DL (not a good idea), then, put each DL in it’s on LI within an OL.
On May 06, 2008
2:46PM
Travis said:
I agree with Paul. One DL for the whole lot of them.
On May 28, 2009
7:41AM
Andy said:
Nice Post… and very interesting to see simple and clear guidelines on one of the more obnscure - but potentially very useful tags.