WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: markup for a Q & A list (kind of was Navigation lists and headers)

for

From: Philip Kiff
Date: Aug 28, 2007 8:00AM

Jukka K. Korpela wrote:
> On Mon, 27 Aug 2007, Keith Parks wrote:
>> So is there a semantically-correct markup for a list of Questions and
>> their Answers?
>
> This is better:
>
> <h2 id="q-foo">The question?</h2>
> <div class="ans">
> <p>The first paragraph of the answer.</p>
> <p>The first paragraph of the answer.</p>
> <p>Etc., optionally with images, tables, etc. as needed.</p>
> </div>

I've used a version of this for a Q & A list before, and I second this
recommendation. Depending on your page layout, you might be able to reduce
the markup further by replacing the series of answer divs with one large
<div id="q-and-a"> enclosing the whole list of questions and answers and
then styling the <p> answers by selecting using #q-and-a p {...} in the
stylesheet.

Phil.