SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Best Markup Strategy for FAQ's and Help??

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

    Maybe something like this...
    HTML Code:
    	<!-- 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...
    HTML Code:
    <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...
    HTML Code:
    <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. #2
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Poland
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.
    http://stommepoes.nl/Scooterverzeker...r2/vragen.html
    (hm and looking at it, it seems I've used exactly your dl setup :)

    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. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    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/Scooterverzeker...r2/vragen.html
    (hm and looking at it, it seems I've used exactly your dl setup
    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. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Debbie
    Also, if DeathShadow were still here,
    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.

    Quote Originally Posted by Debbie
    How did you do that?
    :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.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •