FAQ, best layout suggestions 5

[1DMF]

Hello,

OK, i've finished the sitemap and opted for the ul/li approach, during that thread it was brough to my attention the tag DL, now I am about to embark on the FAQ page and was wondering.

Is the DL tag the way to go? or would you still use UL ?

I've ruled out table you'll be pleased to know and was thinking along these lines...

<dl>
  <dt>Q1 - this is question 1</dt>
    <dd>A1 - this is the answer</dd>
  <dt>Q2 - this is question 2</dt>
    <dd>A2 - this is the answer</dd>
</dl>

what would you guys do?


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[traingamer]

There are many ways to do that. Definition lists (DL) are certainly one way. Simple styled paragraphs are another.

<div id="faqs">
<p class="ques">How do I fix the...</p>
<p class="ans">First of all, blah, blah...</p>
<p class="ques">How do I get the.....</p>
<p class="ans">The easiest way is to blah, blah...</p>
</div>

Style accordingly.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[feherke]

Hi

Personally I would go on Greg's suggestion with a small change :

<div id="faqs">
<[red]h2[/red] class="ques">How do I fix the...</[red]h2[/red]>
<p class="ans">First of all, blah, blah...</p>
<[red]h2[/red] class="ques">How do I get the.....</[red]h2[/red]>
<p class="ans">The easiest way is to blah, blah...</p>
</div>

Assuming that [tt]h2[/tt] is the heading level which properly fits the page structure.

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

hmmm , so although it's a list, you wouldn't use the list tag.

I'll never get my head round this semantics thing, it makes no sense to me.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[traingamer]

There are dozens of ways to do this. Use what you like and what works for you.

An older page on the HTML writer's guild site uses lists and paragraphs combined

http://www.hwg.org/lists/hwg-graphics/faq.html

The Web Design Group

http://htmlhelp.com/faq/html/images.html

uses paragraphs and headers similar to Feherke's suggestion.
Mozilla uses lists and spans on

http://developer.mozilla.org/en/docs/Gecko_FAQ

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[1DMF]

thanks guys, i'm just trying to understand the triggers when deciding what tags to use.

I understood semantics as being the right tag for the job relative to it's contents. bit like not using a hammer to losen a bolt, use a spanner!

So if i'm displaying a list, use OL/UL/ or my new found tag DL, if it's tabular data use a table, if its a paragraph of text use a P tag, if it's a heading use H. etc..

There are always many ways to skin a cat, but what's the best way, the correct, the standards, sematic way , i'm sure as far as the cat is concerned it's "NONE".

so is a question a heading and the answer a paragraph?

or are the questions a 'list' and the answers a 'defenition'.

or am I trying to hard, and it really doesn't matter.

On an SEO forum i'm a member of , many think semantics and standards are not important, results are!

I've spent so many years apparently "doing it wrong" , I'd just like to get it right for once! well as near as damn it is ok with me ;-)



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[traingamer]

In this case, I think you're trying too hard. There is no (to the best of my knowledge) definitive answer to your question. There is no standard markup for displaying FAQs.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

I actually thought going with definition list would be best. I do believe the author of this article agrees:

http://www.tjkdesign.com/articles/toggle_elements.asp

Alternatively, I would go for:

<ol>
  <li>
    <h1>Question?</h1>
    <p>Answer</p>
  </li>
  <li>
    <h1>Question?</h1>
    <p>Answer</p>
  </li>
  <li>
    <h1>Question?</h1>
    <p>Answer</p>
  </li>
  <li>
    <h1>Question?</h1>
    <p>Answer</p>
    <p>More answer</p>
  </li>
</ol>

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[traingamer]

Very nice. Much simpler than linking to named anchors.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[monksnake]

In this case, I think you're trying too hard.

I agree.

<.

 

[1DMF]

i'm a little confused by the example Vragabond

it says there are no inline onclick events, so how does the onclick show/hide the answer.

looking at the code

for(var i=0;i<zDT.length;i++){
		var zContent = zDT[i].innerHTML;
		var zHref = "<a href='#' onclick=\"TJK_doToggleDL("+i+");return false\" title='Show/hide the answer'>";
		zDT[i].innerHTML = zHref + zContent + "</a>";
		zDD[i].className='hideDD';
		zDT[i].className='DTplus';
		}
	}

it seems they are using the bad / memory leakage JS innerHTML to update the DOM with an onclick event.

how is that better than having an inline onclick event direct on the tag that simply shows/hides the hidden content.

don't get me wrong, I use the innerHTML method myself with my AJAX coding, but this seems a rather conveluted way of doing this.

I like the effect, though I've decided to steer clear of JS on this particular site alltogether, as the design doesn't warrant it, but I think i will go down the DL route, as to me it seemed like the right tag for the job.

Thanks foamy, already found a use for it

ok maybe i'm trying too hard, but hey, it's got to be better than my old way, "not trying at all!" - lol

thanks guys, stars all round!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[ChrisHunt]

I think, with issues like this, there are very often several "right" answers (and a lot more "wrong" answers). There are very few cases where a single HTML element is an exact match for whatever you want to represent. more often you have a choice of several possibilities.

A clue that you're making a weak choice is if you have to use classes on every element to get the effect you want. Traingamer's first solution rings alarm bells with me. Feherke's revision of it is better, and would have been better still had he removed all the class="ques" and class="ans" attributes. After all, question styles can be given to [tt]#faqs h2[/tt] and answer styles to [tt]#faqs p[/tt]

I'm a fan of definition lists and use them quite a bit for question/answer pairs (I like to use them for forms too). A FAQ page is a great application for a <dl> in my opinion. They do have a drawback though: there's no element which wraps each <dt>/<dd> pair. So if you want to do something presentationally like drawing a box around each question and answer, you may need another approach. Sure, we're not supposed to worry about presentation in our HTML markup, but sometimes it's a good tie breaker between two possible approaches. If you need that enclosing element, a <ul> or <ol> as described by Vragabond would be a good choice.



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd