Semantic HTML markup for FAQs

html css markup semantics
Raanan Avidor picture Raanan Avidor · Feb 5, 2009 · Viewed 10.3k times · Source

I want to build a questions and answers page.

It is not a list, it is not tabular data and I am not sure if or how I should use <dl><dt><dd>.

What is the best semantic way to build it and to format it with css?

Answer

Trevor Bramble picture Trevor Bramble · Feb 5, 2009

I always use <dl> for FAQs. Typically making the <dt> an anchor for the index of questions to link.

edit...

I should mention, this is my interpretation of the most semantic approach. As I see it, this is exactly the sort of thing <dl> is meant to mark up.

As for CSS, it's really subjective. I do typical heading-ish styles for the <dt>, with a high font-weight, maybe slightly higher font-size, and maybe greater letter/word spacing.

Whatever integrates well with the rest of your visuals on the site and makes the relationship between the question and answer immediately obvious....

Related questions

Class or ID on Body Tag

I've been applying an ID to the body tag of my HTML documents lately to allow greater CSS control (#9). Recently the though occurred to me that I could do exactly the same thing by applying a class to the body …

Read More
Table with fixed header and fixed column on pure css

I need to create a html table (or something similar looking) with a fixed header and a fixed first column. Every solution I've seen so far uses Javascript or jQuery to set scrollTop/scrollLeft, but it doesn't work smoothly on …

Read More
Vertical dividers on horizontal UL menu

I'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items. The actual HTML is as follows: <ul> <…

Read More