Dave Woods - Freelance Web Design Warwickshire

Creating FAQs Using a Definition List

With a lot of web developers finally becoming conscious of using the correct semantic elements for marking up their HTML document, I’m often asked how frequently asked question (FAQ) pages should be marked up. Within this tutorial, I’ll explain how I deal with FAQ pages and provide you with a couple of options that I’ve used in the past.

When dealing with content like tables and paragraphs, it’s usually quite easy to decide which element to use for the given circumstance. However, dealing with FAQs is slightly different in that there is no <faq> tag or a <question> and <answer> tag, so a slightly different approach needs to be taken to ensure that the FAQ is given the same semantic treatment as the rest of the page.

I’ve used a couple of different methods over the years for marking up lists.

Heading and Paragraph Method

The first method I used was to use a heading for the question, a paragraph for the answer and then group all the items together by using a surrounding div.

<div id="faq">
<h2>Can I use tables for creating a webpage?</h2>
<p>No, you should use Semantic HTML for the structure and CSS for the presentation</p>
<h2>Which browser should I support</h2>
<p>As a minimum you should support the latest versions of Firefox, Opera and Safari whilst you should also support IE7 and IE6</p>
</div>

This method does work quite well but whilst it provides some semantic meaning, it never quite felt right. The FAQs are in essence a list of items but using headings and paragraphs doesn’t quite convey this meaning.

Definition Lists

So recently, I’ve started using a definition list to markup frequently asked question lists as I feel it gives each item much more meaning and groups elements together much more effectively.

<dl id="faq">
<dt>Can I use tables for creating a webpage?</dt>
<dd>No, you should use Semantic HTML for the structure and CSS for the presentation</dd>
<dt>Which browser should I support</dt>
<dd>As a minimum you should support the latest versions of Firefox, Opera and Safari whilst you should also support IE7 and IE6</dd>
</dl>

I feel much happier using a definition list for FAQs as it groups the items much better than using a non-semantic div element. Definition terms are then used for the question and the definition description is used for the answer which I feel groups each pair of items much better than any other method.

You could then quite easily use CSS to style this accordingly to give a clearer understanding visually to your definition list. For example:

* {
margin: 0; padding: 0;
}
body {
font: 100%/1.5 "lucida sans", verdana, arial, helvetica, sans-serif;
padding: 10px;
}
h1 {
font-size: 1.4em;
}
#faq {
font-size: 0.8em;
border: solid 1px #999;
padding: 0.5em;
}
#faq dt {
background-color: #CCC;
padding: 0.3em;
font-weight: bold;
}
#faq dd {
padding: 0.5em 0.3em 1em;
}

Summary

As FAQs are quite a subjective topic, there are bound to be numerous different ways of presenting this kind of information. I’ve seen them represented using tabular data and even just using paragraphs styled differently using CSS but personally I feel the two options above are much tidier and semantically better solutions with the definition list being my preferred option.

What do you think?

13 comments on “Creating FAQs Using a Definition List

  1. duryodhan

    “As a minimum you should support the latest versions of Firefox, Opera and Safari whilst you should also support IE7 and IE6”

    What!?!?!

    at the minimum you should support IE and firefox. If time permits test on Safari and Opera.

    Look, I develop on firefox and love it. But I will *always* *always* make sure that the site works on IE before pushing it to the wild.

  2. Dave Post author

    Hi Duryodhan, that’s slightly off topic as I was using that purely as a sample question and answer. But if you develop using web standards then hopefully your site should work by default without any extra time in Firefox, Safari and Opera anyway (always worth checking though). IE7 and IE6 do have a few quirks but I’ve covered that in a few other topics on the site.

  3. duryodhan

    I know it is offtopice, but I couldn’t for the life of me understand how someone as experienced as you could say firefox/opera/safari first and then IE!

    “But if you develop using web standards then hopefully your site should work by default without any extra time in Firefox, Safari and Opera anyway”

    how cute! kinda like Java’s Write Once , Run Anywhere.

  4. Dave Post author

    It may sound like an ideal but if you develop using web standards first and validate your code then you should be able to get your site working consistently fine in Opera, Firefox and Safari without using a single hack (with experience I tend to now find that what works in Firefox usually also works fine in Opera and Safari).

    IE7 may require a little bit of tweaking and we all know about the bugs that IE6 has but if you follow that process then it really shouldn’t cause too many issues and you should be able to support all rendering engines with relatively little trouble.

    I recently had a project that had to be pixel perfect from IE5.5 upwards and although it does have a few complications, as long as you have the knowledge about what problems you’re going to hit (mainly the broken box model) then it shouldn’t give you too many sleepless nights.

    I may write an article which covers this in more detail over the next couple of weeks that explains a bit more about my development process and how supporting Opera, Safari, Firefox and the IE engines shouldn’t be the big problem that a lot of people seem to think it is.

  5. Max Flight

    Dave is absolutely correct, in my opinion. Duryodhan may be a troll – I’m not sure yet. We’ll see, I bet.

    Anyway, the FAQ topic is interesting and you’ve motivated me to go back and look at the markup I wrote so long ago. Thanks for that!

  6. James Salmons

    Thanks for this one. I like the idea and probably would have just blissfully gone on my way without thinking of it.

    James

    P.S. I suppose if someone thinks they just have to think of IE first they can now think IE 8 (standards compliant, right).

  7. Pingback: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

  8. Christopher Michael Pastore

    My order of browser support is Firefox PC/MAC, Safari (PC/MAC), Opera (PC/MAC) then IE7 and last IE6.

    The reason I do this is because IE is the most troubled browser. I use semantic, lean code and adhere to web standards to the extreme. Once all looks great in NORMAL browsers I fix for IE. Enough said.

  9. parms

    Hi

    interesting approach.

    Many times though the aswer to a question in volves multiple lines and paragraphs.

    Can we insert paragrapha(or even images) into this example you have given? Would it still hold from a semantic point of view.

  10. Pingback: CSS Tips Every Web Developer Should Know!

  11. Web Design Leicester

    Really a site should be tested in as many browsers as possible. If it’s built well, it should work with little fuss in all of the standards compliant browsers such as Firefox, Safari, Opera, etc.

    Some additional work might be required for IE 🙂

    Back on topic, this is also how I do my FAQs 🙂