So I’d like to display a list of questions and answers in my page. Would a definition list (<dl>) be the appropriate markup for this i.e.
<dl>
<dt>Q: What is 2 + 2?</dt>
<dd>A: 4</dd>
<dt>Q: Is this appropriate markup?</dt>
<dd>A: I’d recommend asking on Sitepoint.</dd>
</dl>
It could justly be described as a list of questions and answers. I prefer the <dl> route just because it can distinguish between two different categories — in this case Q and A.
all content in a page could justly be described as lists: paragraphs following one another are unordered lists, headings are a list of headings (:)). but that doesn’t make them (ul, ol, dl) lists 
what if the question is lengthy? dt only takes inline. (will you use a dl for this Q&A? ;))
dl only looks right on the surface. to me it seems like a game: how can i make things different and new? well, this will also make them wrong.
i don’t think <p> is only appropriate for lengthy content. short content can also be semantically wrapped in a paragraph.
although it seems that a list (ul, ol, dl) may be the answer for your question, it’s not. following this way of thinking, <h*>s in a page can also constitute a list of headings, and as such, need to be wrapped in a list. that’s not the case.
you don’t have a list, you only have paragraphs. of course, you can wrap them in <div>s if you want a handle on their presentation or to provide structure, but that’s it.
<div class="qa">
<p class="q"><span>Q: </span>What is 2 + 2?</p>
<p class="a"><span>A: </span>4</p>
</div>
<div class="qa">
<p class="q"><b>Q: </b>Is this appropriate markup?</p>
<p class="a"><b>A: </b>I'd recommend asking on Sitepoint.</p>
</div>
<div class="qa">
<p class="q"><span><b>Q: </b></span>Is this markup gone to far?</p>
<p class="a"><span><b>A: </b></span>I think not.</p>
</div>
you (still) need to remember that your page should look good even when CSS is not an option. in the last div i use <b> for when no CSS and then wrap it in a <span> for when CSS is involved. you can argue that <b> is enough even when CSS is an option, but this is just to make a case: first semantic content, after that think about presentation
As far as I’m aware, you can have more than one DD element per DT as per the specification where a term may have more than one definition associated with it (such as dictionary terms with multiple meanings), so I see it as a none-issue to bring up the idea of relating several pieces of information to one item.
ok on the confusing i may be counting too much on MY meaning of the phrase than on YOUR understanding of my phrase. practice will make it better, i promise!
you’re right, an author will decide given his/hers level of knowledge, experience and based on a particular choice.
i find it difficult though, having to cope with a html-text relationship. on a page the content is very dynamic. it seems unrealistic to keep this relation up to date in time, let alone the confusion brought by in the future, if not for you than for the person after you. and html DOM means every piece of content is already in a relationship with one or more pieces of content. do we need that much redundancy?
if you keep it simple you have much more chances to do well with maintaining and developing. stretching a use could prove harmful later, like what happened with the use of tables for layout. although they are to blame in 90% of the cases, it’s still a legitimate use for a 10%. dl can also be justified for 10% but it’s the exception hardening the rule. i’m not saying it’s the same between tables and dls, but you can spot a little of truth there less means more!
i agree, the point i’m making there was not directed at you
no, Stomme poes, you are not the one i was pointing at, no way! i’m sorry and i apologize if you felt that way! you never posted something that made me feel uncomfortable!
You confuse me sometimes, but you don’t make me uncomfortable. But I wondered if I was making YOU uncomfortable. : )
as for anchors and why i brought them in our argument. you said that dl provides a way to define a relationship between two elements. i’ve said that in html the anchor mechanism is the one doing that. then why not use anchors for defining the relation between "Q"s and "A"s? because it’s just not the way to do it.
Ah ok, except hyperlinks (usually) link to documents. While I have used links in-page to “link” related things, it was special-cases: A note with a *, which in print means “read the footnote”… and I’ve made those links to thepage.html#footer so readers of long pages can skip to that footnote easier (mostly in terms&conditions pages).
But if the answers weren’t on a separate page, I wouldn’t use anchors. More than any actual implied linking between words, they are more known for causing browser behaviour.
html semantic disregards text purpose or meaning. you imply that html should look for inside text relationships and outline them. not possible.
I believe HTML should, when possible, reflect the text relationships. If you were putting dictionary definitions on a web page, you would use a dl… not because it’s especially easy to manipulate into a form that makes sense (visually) on a web page, but because that tag was created in order to reflect the same key-value pair relationship that terms and definitions have.
I believe HTML can only do this very loosely and in general, and that it can’t go any further into semantics without either (real) XHTML or microformats, one of the two. But, HTML markup does indeed express relationships. You’re right that it can’t tell WHAT the text is, but relationships are implied… same as a header above some non-header content implies that the non-header content has something to do with the text in the header (even if HTML doesn’t know or care what it is).
also, there are a series of issues that cannot be resolved with the use of dl regarding the subject of Q&As: when Q and A are more than inline, and neither fit in a dt, when Q is on one page, A is on another and probably other.
Yes, there can be various circumstances which would tell the page author not to use a particular method. In your first example, a dl would not do what the author needs; in the second, the anchors you mentioned would actually be perfect.
and strictly from dl point of view, an answer is not a definition for a question.
Deathshadow takes this view too: he will only use a dl for pure terms and definitions, instead of stretching the meaning to “key-value pairs”. Which is fine… as an author, you determine what markup semantics you think you can use.
The OP asked what the best markup would be. Most of us said one of two things would generally work: a dl, or header-content pairs. Obviously if the OP’s also doing some other weird stuff like multi-part questions or separate pages then neither of those answers would work all that well.
back to the point: html is html because of the anchors. now, if you really want to draw a relation between parts of content, you should use anchors.
<a href=“huhwha”>Anchors are for hyperlinks</a>
did you mean something else??
<ol type="deprecated">
<li value="deprecated">Since they can only</li>
<li value="deprecated">go "up" in count</li>
<li value="deprecated">it seems in OLs</li>
<li value="deprecated">that order</li>
<li value="deprecated">is indeed</li>
<li value="deprecated">imposed</li>
<li value="deprecated">like when baking a cake</li>
<li value="deprecated">O unrelenting Arrow of Tyme!</li>
<li value="deprecated">How I despise thee!</li>
<li value="deprecated">When Tomorrow's dreary outcome</li>
<li value="deprecated">Must be preceded by Yesterday's Glories</li>
</ol>
i was wondering if anyone was going to comment on it
actually, there is no order at all, other than that each 17 is supposed to be followed by a 1
<ol type=“A”>
<li value=“17”>wtf?</li>
<li value=“1”>yes, each 17 should be followed by a 1</li>
<li value=“17”>why?</li>
<li value=“1”>because!</li>
<li value=“17”>what happens if you don’t do that?</li>
<li value=“1”>then it looks like crap</li>
<li value=“17”>oh</li>
</ol>
if you couldn’t tell before, it should be obvious now that my method was really tongue-in-cheek – all it really does is generate the Qs and As for ya
even more, what html elements can you employ when you have to underline a relation amongst three or more pieces of content? you’ll have to be consistent in your concept of relationship inside content, and apply the same rule everywhere, pairs or triplets or whatever.
as i’ve said, it only looks right on the surface. if you are willing to sacrifice a few key base concepts and want to believe you’ve discovered something new and valid nobody thought of before, then it will make sense.
There is no semantic element to state how accurate content is, if there was Google could eliminate all the crappy SEO websites within seconds. Just because only one answer is correct doesn’t mean that the others don’t relate to the question in that their being used as a relation in the context of which it’s used. Correct answer or not, their still relative under the circumstances and still applicable IMO to be used. It’s not for semantics to dictate the accuracy of relationships (or even their strength), it’s their job simply to imply that relationships are being indicated to exist. If you want to indicate correct answers to a question, you should supplement the relative descriptions with the REL, REV and ROLE attributes (which indicates the relationship between objects).
no, but i find out that there is a cycle, and complicated stuff always tend to simplify it self. simplicity is the key, novelty is just for fashion industry. you tend to try and stuff your projects with something new all the time, but in the end you go down to basis.
i can try one unix joke (there are so many it’s seems impossible to find an original and new one):
“who put windows here? go fskd your self!”
but i’m pretty sure it’s lame
if i were to recommend a good one, but not about unix, i would point right here. hope you’ll like it
and when you have a Q&A, and you have multiple answers for a question, it may seem like another reason to use dl with a dt and multiple dd.
not so. while a real dictionary term may have multiple definitions, all of which are correct, in a Q&A, a question having multiple answers may have only one (if any) correct answer.
in other words, you’ll end up putting as a definition a non-definition. how is that for html semantic = text semantic ?
The bunch of paragraphs is the worst solution (well, or Rudy’s, which suffers the same problem). Why? Because it shows ZERO relationship between the questions and answers.
A Q&A, by definition, is a series of PAIRS.
A dt-dd has an intrinsic relationship: the dd has a relation to the dd.
header-p/whatever also has an intrinsic relationship: headers “head” the content underneath them, until either the end of the container or the next header of the same or higher level.
But
p
p
p
p
p
p
says absolutely nothing except “a bunch of content”. Where’s the relationship? That’s why we have tags like definition lists and headers.
Rudy’s ordered list has the same problem (each li has no relationship with the one following it) except it also imposes an order, which isn’t intrinsic to a simple series of questions and answers (if they were how-to questions rather than interview questions, then ordered could make sense).
Agreed. My thinking was more along the lines of “<dt>/<dd> is the best solution, but <h*>/<p> would be a good fallback if there is too much text to make a definition list workable”, rather than eschewing <p> because the content was too short.
although it seems that a list (ul, ol, dl) may be the answer for your question, it’s not. following this way of thinking, <h*>s in a page can also constitute a list of headings, and as such, need to be wrapped in a list. that’s not the case.
A definition list can legitimately be used for name–value pairs, which is pretty close to what we’re looking at here. I agree that there is overuse of lists on the web, but I think this is one of those cases where it can be justified.
<div class="qa">
<p class="q"><span>Q: </span>What is 2 + 2?</p>
<p class="a"><span>A: </span>4</p>
</div>
<div class="qa">
<p class="q"><b>Q: </b>Is this appropriate markup?</p>
<p class="a"><b>A: </b>I'd recommend asking on Sitepoint.</p>
</div>
<div class="qa">
<p class="q"><span><b>Q: </b></span>Is this markup gone to far?</p>
<p class="a"><span><b>A: </b></span>I think not.</p>
</div>
Yuk! Where are the semantics there? That gives nowhere near the same level of significance to the relationship between the question and the answer as a <dl> does, and uses a load more markup to achieve less.
you (still) need to remember that your page should look good even when CSS is not an option.
Not quite. You have to remember your page should make sense even when CSS is not an option. No-one says anything about it looking good, just that it has to be clear how it all hangs together. And there I think you would have to agree that a marked <dl> gives more meaning than a series of paragraphs alternately asking and answering questions but indistinguishable in any other way.
in the last div i use <b> for when no CSS and then wrap it in a <span> for when CSS is involved. you can argue that <b> is enough even when CSS is an option, but this is just to make a case: first semantic content, after that think about presentation
Oh, the irony of being lectured at about semantics by someone who wants to use <b> … and who is considering <span><b>Blah blah</b></span> as a sensible option. Surely <abbr title=“Question”> would be even more appropriate, if you’re going to go down that route…
I think of that as a series of steps, rather than a list of steps. 
… Though often those steps are numbered… 
Hey HTML5 people, we need ordered series and unordered series elements:
<os></os>
<us></us>
so the steps in preparing a recipe are parts of a list?
<dl>
<dt>
Gather ingredients
</dt>
<dd>
Go scrap an egg from under the chicken. Make some flour from your freshly harvest wheat. Sugar from your plantation.
</dd>
<dt>
Mix ingredients
</dt>
<dd>
Crack the egg. Pour the flour. Hold the sugar :)
</dd>
<dt>
Bake
</dt>
<dd>
Make sure you don't set your house on fire :)
</dd>
<dt>
Get the cake
</dt>
<dd>
Run to the local bakery and get a real cookie :rofl:
</dd>
</dl>
So a shopping list is really just a bunch of short paragraphs?
what if the question is lengthy? dt only takes inline. (will you use a dl for this Q&A? ;))
You got me there. Good point.
<ol type="A">
<li value="17">Any other way to mark up a Q and A list?</li>
<li value="1">Yes.</li>
</ol>
