Semantic HTML markup for FAQs
Solution 1
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....
Solution 2
I'd go with the simplest model; each question is a heading, with answers in paragraph tags. Clear, logical and semantically sane, I think.
The reason I wouldn't use the definition list tags mentioned is that I don't think, from a pure semantic point of view, that questions and answers fit the mould of pure terms and definitions.
Comments
-
abc almost 2 years
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?
-
Christopher Swasey over 15 yearsAn article from 2007's 24ways addresses semantic use of DL. It manages to avoid this specific situation, but is still relevent. 24ways.org/2007/my-other-christmas-present-is-a-definition-list
-
aruno over 11 yearswhat's the worst that can happen (serious question) with using definition lists? does google get confused / do screen readers get confused? I realize it's not a perfect match but I don't see a better alternative
-
Klara_P about 10 yearsDefinition lists now have a new role, thanks to HTML5: they're called 'description' lists instead, and can be used for any name/value combinations. html5doctor.com/the-dl-element