Best Markup Strategy for FAQ's and Help?

HTML & CSS
1

Generally speaking, what would be the best HTML markup to use when building a FAQ’s and/or Help section?

Maybe something like this…


	<!-- FAQ #1 -->
	<h3><span>Fact #01:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
		Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
	</p>

Or possibly this…


<dl>
	<dt>FAQ #1:</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
					Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
		</dd>
	<dt>FAQ #2:</dt>
		<dd>Donec pharetra luctus nisl et sollicitudin. Aliquam
					faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
					luctus auctor, metus libero dictum nunc, vitae imperdiet est
					massa eget massa.
		</dd>
</dl>

Or here is another flavor…


<li>
	<!-- FAQ #1 -->
	<h3><span>Fact #01:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
		Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
	</p>
</li>
<li>
	<!-- FAQ #2 -->
	<h3><span>Fact #02:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
		Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
	</p>
</li>

Sincerely,

Debbie

2

In my opinion DL suits better here. It is a definition list of name-value pairs which can be terms with definitions, questions with answers etc.
If you use headings you will rather describe FAQ as a list of subsections with content that doesn’t have to explain its title or describe it.
This is how I feel it and used to implement FAQs.

3

I personally tended to use DLs, and in Terms&Conditions it was a (complex) combination of lists and DLs.

However the relationship is pretty loose (question and answer; heading and headed-text) so headings followed by text is perfectly fine. Really all three of your examples would be good in my book.

If there are 10 or more, or if the answers are long, it’s also nice to add skipping-to’s.

(hm and looking at it, it seems I’ve used exactly your dl setup :slight_smile:

One small nitpick:
<h3><span>Fact #01:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
When you’ve got either inline tags next to each other, or inline tags next to anonymous inline boxes (loose text), separate them with a space.
Otherwise you’ll have this:
Fact #01:Small-Businesses represent 99.7% of all employer firms.
which for some software (both things like screen readers and things like good text editors) makes this considered a single word:
“#01:Small-Businesses”
when you’d rather have
“#01:” and “Small-Businesses”

Actually you probably do already use spaces, since once you look at what’s rendered on teh web page you’d prolly notice the run-together.

4

One advantage of the 1st example is that is scales to allow multiple paragraphs for a given Heading. (Which is exactly what I needed with my “Facts”…)

Also, if DeathShadow were still here, he’d jump all over putting a <h3> inside a <li>, and I’d agree.

If there are 10 or more, or if the answers are long, it’s also nice to add skipping-to’s.
http://stommepoes.nl/Scooterverzekeren/scooter2/vragen.html
(hm and looking at it, it seems I’ve used exactly your dl setup :slight_smile:

How did you do that?

HTML Bookmarks, are they called?

One small nitpick:
<h3><span>Fact #01:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
When you’ve got either inline tags next to each other, or inline tags next to anonymous inline boxes (loose text), separate them with a space.
Otherwise you’ll have this:
Fact #01:Small-Businesses represent 99.7% of all employer firms.
which for some software (both things like screen readers and things like good text editors) makes this considered a single word:
“#01:Small-Businesses”
when you’d rather have
“#01:” and “Small-Businesses”

Actually you probably do already use spaces, since once you look at what’s rendered on teh web page you’d prolly notice the run-together.

I think in my current code I used “padding” to spaces things out, but, yes, you are right!

Thanks,

Debbie

5

If he were here he’d also rant about using DLs for anything other than dictionary definitions. Even the W3C used looser examples. I think eventually everyone realised having tags that were very super-specific were a bit useless, since we never get to have a super-specific tag for every little niche we need them in. XML for that.

So for me, DLs represent any name-value pairs in my head.

:target attribute. Everything there is HTML and CSS, no JS (I would consider adding some JS so instead of a harsh jump, a quick scroll down so users don’t get as disoriented), so it’s all there in the code. (the desktop-oriented CSS file, mobile does less drastic changes.)