[html5] How to mark up FAQ

[Ian Hickson]

On Mon, 17 Mar 2014, Gordon Baker wrote:
>
> Hi, I'm wondering what's the current best practice for marking up an FAQ. There seem to be 3 main alternatives:
> <h1>Question</h1><p>Answer</p><h1>Question</h1><p>Answer</p>...
> or
> <dl>  <dt>Question</dt>  <dd>Answer</dd>  <dt>Question</dt>  <dd>Answer</dd>...</dl>
> or
> <details>  <summary>Question</summary>  <p>Answer</p></details><details>  <summary>Question</summary>  <p>Answer</p></details>...

Those are all fine (though the <details> case is a bit of a stretch).

There's an example in the spec of marking up a FAQ in the <dt> section:

   http://whatwg.org/html/#the-dt-element

The WHATWG FAQ itself is marked up using <hx> and <p>.


> The h1-p option would create an implicit section for each question and 
> affect the document outline. Perhaps that would be a good thing if you 
> wanted to create a TOC for the FAQ...

Yeah, that's more or less why we use it in the WHATWG FAQ.


> The association list (dl) seems like a reasonable option if you don't 
> want to affect the document's outline. I'm not sure of any 
> advantages/disadvantages of this markup, though.

There's not really any disadvantages that I can see.


> The details-summary option seems nice if you want a "collapsed" FAQs, 
> particularly for those who don't know how to program in JS, but IE and 
> FF don't yet support this functionality AFAICT. Also not sure if FAQ was 
> an intended use of details-summary, semantically.

It's a bit of a stretch, but could probably be defended.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'