[html5] How to mark up FAQ

[Jukka K. Korpela]

2014-03-17 18:30, Gordon Baker wrote:
> Hi, I'm wondering what's the current best practice for marking up an FAQ.

There is no specific practice, and none is really needed. The important 
question is why you are using markup and what you expect from it. This 
isn't really about pleasing some gods of HTML but about your needs and 
goals.

> There seem to be 3 main alternatives:
>
> <h1>Question</h1>
> <p>Answer</p>
> <h1>Question</h1>
> <p>Answer</p>

This is not satisfactory on several grounds. You would be using several 
1st level headings. How would you mark the real 1st level heading then, 
the page heading? If it's h1, too, then search engines would not know 
which h1 is the real one. And the default (non-CSS) rendering would be 
bad, with huge font size.

This would also restrict answers to single paragraphs.

Moreover, there would be no container for the FAQ as a whole, the list. 
This would make styling and scripting inconvenient. You could wrap it 
all in a <div> element.

> <dl>
>   <dt>Question</dt>
>   <dd>Answer</dd>
>   <dt>Question</dt>
>   <dd>Answer</dd>
> ...
> </dl>
>

This makes the FAQ as a whole a single element and lets you to style it 
conveniently. The default rendering would not be very good, but perhaps 
acceptable. Search engines probablydon't give <dt> much relative weight, 
but normally you would want the questions to be emphasized more than the 
answers.

If you need to group consecutive questions and answers e.g. for styling, 
you can't, in this model. A <dl> element does not allow such grouping.

> <details>
>   <summary>Question</summary>
>   <p>Answer</p>
> </details>
> <details>
>   <summary>Question</summary>
>   <p>Answer</p>
> </details>
> ...

Rather contrived, but possible. Browser support can be a problem, and I 
don't mean just old browsers that simply ignore <details> and <summary> 
tags but also issues in quality of implementations of this relatively 
new constructs. Most importantly, this would be relevant if a particular 
kind of user interface is what you want.

To mention yet another approach, you could use a two-column table, with 
questions in one column, answers in another. The data is structurally 
tabular, but this is not a place for a table for practical reasons: in 
almost all cases, tabular (grid) presentation is not suitable, and there 
is not much tangible benefit from using <table> here.

In a typical case, the best approach might be something like this:

<div class=faq>
<h2 id=abc>Question abc</h2>
Answer to question abc. Use p markup if you have some use for it, typically
when answers are longer than one paragraph.
<h2 id=def>Question def</h2>
...
</div>

The id attributes are there to allow direct linking to specific 
questions from other pages. They are also useful if you set up a table 
of content, of course.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/