[html5] How to mark up FAQ
Jukka K. Korpela
jukka.k.korpela at kolumbus.fi
Mon Mar 17 14:48:18 PDT 2014
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
> There seem to be 3 main alternatives:
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.
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
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.
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:
<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>
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.
More information about the Help