Using Definition Lists: Question & Answer formatting

Published April 21, 2008 by Guest Author.

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):

24 Responses

  1. Richard

    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.

  2. mooty

    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

  3. mardulia

    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?

  4. mardulia

    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?”

  5. Pingback: Links of Interest - CSS-Tricks

  6. Pingback: » Using Definition Lists: Question & Answer formatting Webcreatives

  7. Edwin

    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 :)

  8. Morpheus

    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).

  9. Pingback: Definir listas para crear una secuencia de preguntas y respuestas « Xyberneticos

  10. Pingback: Best Of April 2008 | Best of the Month | Smashing Magazine

  11. NortelNetworks

    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.

  12. Pingback: Kantongin » Best Of April 2008

  13. Pingback: Skaitiniai #55 » Pixel.lt

  14. Pingback: Best Of April 2008 - Glimpses of the Aleph

  15. Andy

    Nice Post… and very interesting to see simple and clear guidelines on one of the more obnscure – but potentially very useful tags.

  16. MUHAMMAD ISMAIL

    ok insha-ullah i help your group and friends. please you help me and i help you . Allah success all my friends. Aamin

  17. Pingback: Geek is a Lift-Style. » Best Of April 2008

  18. Me

    there is absolutely nothing wrong with using an unordered list for Q&A’s, I think they look much neater than definition lists. To suggest that definition lists are the best way to go, suggests that you have something stuck somewhere it doesn’t belong. I would also suggest that you get your tags correct before assuming that you have anything worthwhile to teach.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>