SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Appropriate Markup for a Question and Answer List

    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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Technically it's fine, although, as this page points out, some people argue against using a <dl> for a dialogue, which is sort of what you are presenting here. Still, off the top of my head, I can't think of a better element or method for marking this up... but that doesn't mean there isn't one!

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    If your answers are going to be of that kind of length then you probably are right to use a <dl>. It doesn't seem quite right, and I think that's because of the way you're asking a question rather than giving a defined term, but I can't think of a better method.

    In an ideal world, you could do without the Q: and A: in the code - if you want them in the display, you can add them back in with the :before pseudo-class. Unfortunately, that fails on IE7 and below, so for now you can only do that if you don't mind 1 in 5 of your visitors not seeing them.

    If your answers were longer, I'd recommend using <h*> and <p> elements, but that wouldn't seem appropriate for such short extracts.

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,338
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Code:
    <ol type="A">
    <li value="17">Any other way to mark up a Q and A list?</li>
    <li value="1">Yes.</li>
    </ol>

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    If your answers were longer, I'd recommend using <h*> and <p> elements, but that wouldn't seem appropriate for such short extracts.
    i don't think <p> is only appropriate for lengthy content. short content can also be semantically wrapped in a paragraph.

    Quote Originally Posted by Andrew Millne View Post
    So I'd like to display a list of questions and answers in my page.
    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.

    HTML Code:
    <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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by noonnope View Post
    you don't have a list, you only have paragraphs.
    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.

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by noonnope View Post
    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
    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.

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    So a shopping list is really just a bunch of short paragraphs?
    so the steps in preparing a recipe are parts of a list?

    HTML Code:
    <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>

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by noonnope View Post
    so the steps in preparing a recipe are parts of a list?
    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:
    Code:
    <os></os>
    <us></us>

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    For these short questions and answers personally I have probably gone with plain old paragraph it's more than suitable enough.

    If you wanted to expand it you could go with headings:

    <h3>Question One</h3>
    <p>When a vault guard enters and says: "Hello Stranger, who are you?"... How, do you get rid of him quickly?</p>
    <h3>Answer</h3>
    <p>You say your name is; "Croesus".</p>

  12. #12
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    i don't think <p> is only appropriate for lengthy content. short content can also be semantically wrapped in a paragraph.
    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.

    HTML Code:
    <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...

  13. #13
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    a best solution applies successfully in all scenarios. if there are (some) scenarios where this solution needs a fallback, then i suggest changing its name from "the best solution" to "a solution"



    Quote Originally Posted by Stevie D View Post
    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.
    i've seen the same argument in a discussion regarding the use of dl for forms. it made more sense there than here, but still, it wasn't enough.



    Quote Originally Posted by Stevie D View Post
    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,[...]
    you seem to mix up html element's semantics (the right element for the right content) with author's semantics (pure belletristic).

    if you mean html element's relationship, than you are referring to label/input relationship, (ul,ol)/li relationship and so on.

    if you mean author's text relationship, what are you going to do when the text makes a reference to content in another page? use dl to draw that relationship?



    Quote Originally Posted by Stevie D View Post
    [...] and uses a load more markup to achieve less.
    if you're looking to spare markup, you should consider using <center> more often this policy of achieving more with less works, just not that well sometimes.

    if you look enough to see there are two ways i've marked up the "Q"s and "A"s. using
    HTML Code:
    <span><b>Q: </b></span>
    gives my markup a distinct look when no CSS, but if you rather not (i don't see why you are so against its use in html 4.01 though), you can use
    HTML Code:
    <span>Q: </span>
    for when CSS may come along.

    together, html only speaking at first, it makes the more sense.
    first
    HTML Code:
    <p><b>Q: </b> ...</p>
    and then, for CSS purpose
    HTML Code:
    <p><span><b>Q: </b></span>...</p>
    (like the <div>s).



    Quote Originally Posted by Stevie D View Post
    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.
    i believe that CSS (and HTML constructs for pure CSS purpose, that are not involving content whatsoever) it's the last one on the list. so, your html markup needs to make sense considering first that CSS is not an option. ie, will also look good



    Quote Originally Posted by Stevie D View Post
    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.
    yes, i agree it would give a wrong meaning. html semantics and text semantics don't mix!



    i'm going to ignore the last part. i like a good argument when it's good. taking things out of context and paint them a different colour... not my business.

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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).

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    let me say this once again: html semantics and text semantics don't mix! you are trying to use html semantics to depict text semantic. it's just not possible to assign html elements to belletristic meanings

    leaving aside this, what base do you have for assigning questions to dt and answers to dd? based on the fact that questions came first? i guess you're wrong again. remember a little game where at first you got the answer and you need to provide the question?

    secondly, dt only takes inline. what if you question is longer than a grumpy old man's talk?

    need more arguments against? try using tables for layout: it makes sense but you better think twice!

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    let me say this once again: html semantics and text semantics don't mix!
    I disagree.

    leaving aside this, what base do you have for assigning questions to dt and answers to dd? based on the fact that questions came first? i guess you're wrong again. remember a little game where at first you got the answer and you need to provide the question?
    Irrelevant. The point is they are a pair. A key-value pair. Two p's do not have that relationship.

    secondly, dt only takes inline. what if you question is longer than a grumpy old man's talk?
    Then I would use the solution that would still allow me to keep the pair relationship.

    need more arguments against? try using tables for layout: it makes sense but you better think twice!
    I don't consider a Q&A pair to be tabular data.

  17. #17
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    In regards to your comments noonope, the idea of using definition list for the base pairs is entirely correct, in circumstances where the answers proceed the question it doesn't make a difference whatsoever to the semantic usage. The point of a definition title isn't strictly to pose a question (in the context of usage), it's to provide a lead which relates heavily to the subsequent information. In the context whether question or answer first, the description should relate directly as a result of the relationship of the first item. Thereby even though it's straining the implementation of what DL's were produced for, I would say that it's far better to define a loose semantic relationship between the two values in opposition to your suggestion of a couple of paragraphs which have no relationship and thereby apart from cascading in order, they could quite easily be totally unrelated. Though I would agree to a certain extent with you that perhaps a better solution may be to use a low heading (such as an H4 or H5) with the paragraph of related content following it (in order to relate the content outside of the contexts of defined relative content).

  18. #18
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I don't consider a Q&A pair to be tabular data.
    not what i meant and you know it !

  19. #19
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by AlexDawson View Post
    In regards to your comments noonope, the idea of using definition list for the base pairs is entirely correct [...]
    there are infinite cases where parts of content make belletristic pairs, but that doesn't justify the use of dl. like, for example, a section should be a dl: dt for heading dd for content. and so on

    do you wrap all these pairs in a dl? no. why? if you are thinking of using dl for Q&As, you anser !

  20. #20
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  22. #22
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,338
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Rudy's ordered list has the same problem (each li has no relationship with the one following it) except it also imposes an order
    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

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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??

    Code:
    <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>

  24. #24
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    not what i meant and you know it !
    Really? I can't speak for Stomme, but I very rarely know what you mean, your writing style and your arguments wander all over the place, and half the time you seem to be arguing just for the sake of it, making up spurious examples that have no bearing on the original question, the point you're answering or any form of reality...

  25. #25
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stevie D

    thank you. you didn't have to, though but ask yourself this: did you make any valid points ? in the above post, at least.


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
  •