E-mail List Archives
Thread: markup for a Q & A list (kind of was Navigation lists and headers)
Number of posts in this thread: 12 (In chronological order)
From: Keith Parks
Date: Mon, Aug 27 2007 4:50PM
Subject: markup for a Q & A list (kind of was Navigation lists and headers)
No previous message | Next message →
On Aug 27, 2007, at 2:42 PM, Jukka K. Korpela wrote:
>
> A definition list doesn't magically become semantically appropriate
> just
> because people like its semantics. If you really love it, leave it
> for its
> _defined_ use as a list of _terms_ and their definitions.
>
So is there a semantically-correct markup for a list of Questions and
their Answers?
Something better than:
<p>The question?</p>
<p>The answer.</p>
Thanks,
Keith
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.keithparks.com
http://www.sa.sdsu.edu/communications
----------------------------------------------------------
A riddle wrapped in a mystery inside an enigma, served with a side of
slaw.
From: Jukka K. Korpela
Date: Tue, Aug 28 2007 1:10AM
Subject: Re: markup for a Q & A list (kind of was Navigation lists and headers)
← Previous message | Next message →
On Mon, 27 Aug 2007, Keith Parks wrote:
> So is there a semantically-correct markup for a list of Questions and
> their Answers?
There are several alternatives, ranging from semantically empty markup
(using <div>) to various attempts at saying _something_ about the
semantics. There is no alternative that could be called _the_ semantically
correct markup, since there is no element for such a particular type of a
list in HTML.
> Something better than:
>
> <p>The question?</p>
> <p>The answer.</p>
Well, that's a semantically wrong, or at least questionable, markup, since
the question does not constitute a paragraph. The answer might. In special
cases, even <p>No.</p> might go for an answer and for a paragraph, when
it appeas in a context where answers are normally normal paragraphs.
There's the specific accessibility problem with it that it does not
distinguish questions from answers (except by the grammatical form and
the meaning of the text), visually or audibly.
This is better:
<h2 id="q-foo">The question?</h2>
<div class="ans">
<p>The first paragraph of the answer.</p>
<p>The first paragraph of the answer.</p>
<p>Etc., optionally with images, tables, etc. as needed.</p>
</div>
This would probably require the use of CSS to make the headings less
prominent than by default, especially as regards their font size.
The idea in wrapping the answer in <div> markup with class is to allow
easy styling of the document so that some features are applied to an
answer as a whole. This is not just authoring convenience; some users who
visit the page often might even wish to set up their user style sheet for
it, so clarity of markup (including even class and id names - q-foo should
be replaced by something mildly descriptive of the question) and
sufficient "hooks" for styling are an asset.
The idea in the id="..." attribute is to allow direct references to the
question by URLs with fragment ids, so that users can cite a particular
question & answer to benefit each other. It's also useful for setting up a
table of contents, consisting of just the questions (as links) and
section headings, which probably should be created unless the answers are
short and most of them are very short.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Tim Beadle
Date: Tue, Aug 28 2007 2:10AM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →
On 27/08/07, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
> A definition list doesn't magically become semantically appropriate just
> because people like its semantics. If you really love it, leave it for its
> _defined_ use as a list of _terms_ and their definitions.
Even the w3c accept other uses for dl/dt/dd besides just terms and definitions.
Tim
From: Philip Kiff
Date: Tue, Aug 28 2007 8:00AM
Subject: Re: markup for a Q & A list (kind of was Navigation lists and headers)
← Previous message | Next message →
Jukka K. Korpela wrote:
> On Mon, 27 Aug 2007, Keith Parks wrote:
>> So is there a semantically-correct markup for a list of Questions and
>> their Answers?
>
> This is better:
>
> <h2 id="q-foo">The question?</h2>
> <div class="ans">
> <p>The first paragraph of the answer.</p>
> <p>The first paragraph of the answer.</p>
> <p>Etc., optionally with images, tables, etc. as needed.</p>
> </div>
I've used a version of this for a Q & A list before, and I second this
recommendation. Depending on your page layout, you might be able to reduce
the markup further by replacing the series of answer divs with one large
<div id="q-and-a"> enclosing the whole list of questions and answers and
then styling the <p> answers by selecting using #q-and-a p {...} in the
stylesheet.
Phil.
From: Keith Parks
Date: Tue, Aug 28 2007 9:00AM
Subject: Re: markup for a Q & A list (kind of was Navigation lists and headers)
← Previous message | Next message →
On Aug 28, 2007, at 6:58 AM, Philip Kiff wrote:
> Jukka K. Korpela wrote:
>> On Mon, 27 Aug 2007, Keith Parks wrote:
>>> So is there a semantically-correct markup for a list of Questions
>>> and
>>> their Answers?
>>
>> This is better:
>>
>> <h2 id="q-foo">The question?</h2>
>> <div class="ans">
>> <p>The first paragraph of the answer.</p>
>> <p>The first paragraph of the answer.</p>
>> <p>Etc., optionally with images, tables, etc. as needed.</p>
>> </div>
THis seems to presume that the question will be shorter than the
answer. I had thought of using a header of some level for the
question, but when the question is long (potentially more than one
sentence), it somehow did not seem correct. A specific example...
Q: Can we bring grandparents and family friends to Family Weekend
events that include food, without having to pay to register them, if
they don't eat anything?
A: Yes.
Grammatically, both of those would constitute paragraphs, right?
> I've used a version of this for a Q & A list before, and I second this
> recommendation. Depending on your page layout, you might be able
> to reduce
> the markup further by replacing the series of answer divs with one
> large
> <div id="q-and-a"> enclosing the whole list of questions and
> answers and
> then styling the <p> answers by selecting using #q-and-a p {...} in
> the
> stylesheet.
This is akin to what I've done in the past, only (mis)using the <dl>,
<dt> and <dd> tags.
I can see the value of the <h?> tags in that they would allow a way
structurally to pull out or "scan" the questions. SO should I just
get over the concept that a <header> should be short?
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
(Objects on your screen may be closer than they appear)
From: James Leslie
Date: Tue, Aug 28 2007 9:10AM
Subject: Re: markup for a Q & A list (kind of was Navigation listsand headers)
← Previous message | Next message →
>>...only (mis)using the <dl>, <dt> and <dd> tags.
>>
>>I can see the value of the <h?> tags in that they would allow a way
structurally to pull out or "scan" the >>questions. SO should I just get
over the concept that a <header> should be short?
This is something I have debated many times at work (we make faq
microsites) but in the main, I use
<h2 id="question">Question goes in here</h2>
<div id="answer">
<p>Answer goes in here</p>
</div>
In practice we do quite often have longer questions than answers, but
that shouldn't change the semantic value of the markup.
I have toyed with definition lists and can see an argument that
(semantically) the answer is defined by the question, but decided
against them except where I have a long list of faqs that are within a
section area, kind of as below:
<dl>
<dt>Most popular questions in: Buying</dt>
<dd><a href="#">Question 1</a></dd>
<dd><a href="#">Question 2</a></dd>
<dd><a href="#">Question 3</a></dd>
<dt>Most popular questions in: Selling</dt>
<dd><a href="#">Question 1</a></dd>
<dd><a href="#">Question 2</a></dd>
<dd><a href="#">Question 3</a></dd>
</dl>
My 2p....
James
From: Philip Kiff
Date: Tue, Aug 28 2007 9:40AM
Subject: Re: markup for a Q & A list (kind of was Navigation listsand headers)
← Previous message | Next message →
Keith Parks wrote:
> On Aug 28, 2007, at 6:58 AM, Philip Kiff wrote:
>
>> Jukka K. Korpela wrote:
>>> <h2 id="q-foo">The question?</h2>
>>> <div class="ans">
>>> <p>The first paragraph of the answer.</p>
>>> <p>The first paragraph of the answer.</p>
>>> <p>Etc., optionally with images, tables, etc. as needed.</p>
>>> </div>
>
> THis seems to presume that the question will be shorter than the
> answer. I had thought of using a header of some level for the
> question, but when the question is long (potentially more than one
> sentence), it somehow did not seem correct. A specific example...
Mmmm...I see what you mean. I suppose that *very* long headings may
themselves start to get in the way of other kinds of
accessibility/usability, since they would disrupt the possibility of getting
a quick overview of a page by listening to all the headings (unless the user
actively interrupts the reading of long questions). Note however that the
use of heading elements makes the page more readable and scannable visually
with styles disabled (cell phone, text browsers, etc), even when the
headings are the length of paragraphs.
What was your original option? Simply using paragraphs? I don't think
there is any technical limit placed on the length of a heading, but it does
seem that at the level of semantic meaning, the longer the question, the
less it is acting like a heading, and the more it starts to act like a
paragraph. So while the use of headings makes sense, perhaps individual
cases may work better as paragraphs only.
> Q: Can we bring grandparents and family friends to Family Weekend
> events that include food, without having to pay to register them, if
> they don't eat anything?
>
> A: Yes.
>
> Grammatically, both of those would constitute paragraphs, right?
Yes.
Phil.
From: Austin, Darrel
Date: Tue, Aug 28 2007 12:20PM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →
> Here we go again. It's not just semantically wrong. It's even
> syntactically wrong, since dt elements allows inline content only (not
> surprisingly, since terms are words, not blocks).
Ah, yes...good point.
That said, I do argue that DL are very semantic for menus. The
definition itself accommodates many uses outside of your generic
dictionary context of definitions.
And, at that point, while H2s might be more accessible, I'd argue that
they are less semantic. Headers are for content. Not navigation.
But, that's another debate for another time... ;o)
In the end, the issue is that current versions of HTML never considered
having semantic tags specifically for navigation (a rather huge
oversight, but, oh well...)
-Darrel
From: Austin, Darrel
Date: Tue, Aug 28 2007 12:30PM
Subject: Re: markup for a Q & A list (kind of was Navigation lists andheaders)
← Previous message | Next message →
> So is there a semantically-correct markup for a list of Questions and
> their Answers?
The semantic part would be to simply separate the Q from the A. I think
a DL is as good as any tags given that we don't have specific <Q> or <A>
tags. Others suggest using H# tags for the Qs and find that equally
acceptable semantics-wise, and perhaps better accessibility-wise.
-Darrel
From: Karl Groves
Date: Tue, Aug 28 2007 12:40PM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> Austin, Darrel
> Sent: Tuesday, August 28, 2007 2:16 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Navigation lists and headers - best practise?
>
> > Here we go again. It's not just semantically wrong. It's even
> > syntactically wrong, since dt elements allows inline
> content only (not
> > surprisingly, since terms are words, not blocks).
>
> Ah, yes...good point.
>
> That said, I do argue that DL are very semantic for menus.
> The definition itself accommodates many uses outside of your
> generic dictionary context of definitions.
>
> And, at that point, while H2s might be more accessible, I'd
> argue that they are less semantic. Headers are for content.
> Not navigation.
Not that Jukka needs anyone to come to his defense, but it seems like you're
trying to have your cake and eat it, too.
On one hand you're attempting to argue for semantics ("Headers are for
content, not navigation"), while trying to argue a case which is a semantic
misuse of elements. To argue for the use of a "definition list" as being
for anything *other* than for a list of terms and definitions is without a
doubt a use of the definition list for a purpose it was not intended to
serve.
Despite the fact that the current W3C page[1] discusses that "definition
lists may have other applications", the archived documents[2] do not include
this statement. To me, this is simply further evidence that definition lists
were intended solely to mark up that which their name pretty explictly
states: definitions. Comments embedded within the HTML 4.01 Strict DTD
itself even state, "definition lists - DT for term, DD for its definition".
Despite the fact that a definition list appears highly appropriate for any
list of key->value pairs or semantic grouping of like items, that was not
their intent.
1 - http://www.w3.org/TR/html401/struct/lists.html
2 - http://www.w3.org/MarkUp/html-spec/html-spec_9.html
http://www.w3.org/MarkUp/1995-archive/Lists.html
http://www.w3.org/TR/WD-html40-970708/struct/lists.html
3 - http://www.w3.org/TR/html4/strict.dtd
Karl
From: Austin, Darrel
Date: Tue, Aug 28 2007 12:50PM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →
> Not that Jukka needs anyone to come to his defense, but it seems like
> you're
> trying to have your cake and eat it, too.
If course! But, alas, that's rarely possible with the current state of
standards. ;o)
> To argue for the use of a "definition list" as
> being
> for anything *other* than for a list of terms and definitions is
> without a
> doubt a use of the definition list for a purpose it was not intended
to
> serve.
There is no semantic tag for navigation labels. As such, whether one
uses a header or a dl would be easily argued the same in terms of
semantics or lack thereof.
Given the rather rudimentary set of tags we have to work with, we make
do.
I think I could argue either case in terms of which would be more
semantic in this case. It's just that at the moment, I like the DL
format.
> To me, this is simply further evidence that definition
> lists
> were intended solely to mark up that which their name pretty explictly
> states: definitions.
Interesting that the W3c felt that it was very important to have a list
of words and their definitions, but not navigation on a site. ;o)
> Despite the fact that a definition list appears highly appropriate for
> any
> list of key->value pairs or semantic grouping of like items, that was
> not
> their intent.
Fair enough. That said, if you read the description header tags, I could
come to the exact same conclusion that they never intended it for
grouping/labeling navigation. In the end, the specs are vague enough
that anyone willing enough could argue their case.
I'm not saying H2 tags are wrong...just that they are no right/less
wrong from a semantic standpoint in this context. From an accessibility
standpoint, it sounds like the header tags are preferred.
-Darrel
From: Karl Groves
Date: Tue, Aug 28 2007 2:10PM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | No next message
> > To argue for the use of a "definition list" as being for anything
> > *other* than for a list of terms and definitions is without
> a doubt a
> > use of the definition list for a purpose it was not intended
> to
> > serve.
>
> There is no semantic tag for navigation labels. As such,
> whether one uses a header or a dl would be easily argued the
> same in terms of semantics or lack thereof.
>
> Given the rather rudimentary set of tags we have to work
> with, we make do.
You could always write your own DTD. Then you can have any element you want!
;-)
>
> I think I could argue either case in terms of which would be
> more semantic in this case. It's just that at the moment, I
> like the DL format.
Taking this discussion purely as one of "Navigation Lists", I find that
using a header which precedes a list (unordered, IMO, but ordered could be
argued) is the most appropriate. What is navigation, after all, but a list
of links?
Its sad, IMO, that the LH element never survived into a published
recommendation, dying on the vine of HTML 3.0, IIRC.
Karl