SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Correct way of marking up quotations / testimonials?

    if we wanted to display testimonials from people like for example:

    "This product is awesome"

    - Person's name


    How can we do it?

    Is it proper to put it like this in html?

    Code HTML4Strict:
    <blockquote>
         <p>This product is awesome</p>
    </blockquote>
    How do you markup the person who provided the the testimonial?

    Or os this a better way?

    Code HTML4Strict:
    <blockquote>
         <p class="testimonial">This product is awesome</p>
         <p class="quoter">Person's name.</p>
    </blockquote>
    THank you

  2. #2
    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)
    It can vary but usually it goes along these lines;

    Code HTML4Strict:
    <blockquote cite="http://www.example.org/">
    <p>
    "That xhtmlcoder is Da Bomb!"
    </p>
    <p>
     [James Bond]
    </p>
    </blockquote>

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    if the P containing the person's name is to be treated differently from the P that contains the quote (e.g. the person's name is often right justified), then you would need to target it specifically

    thus, the class="quoter" is needed, while the other class is not
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    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)
    Actually I would be tempted to use a definition list as it's relational data (so semantically accurate), especially as HTML5 uses the dialog element...
    Code HTML4Strict:
    <blockquote cite="http://www.example.org/">
         <dl>
              <dt>James Bond</dt>
              <dd>That xhtmlcoder is Da Bomb!</dd>
         </dl>
    </blockquote>
    If you wanted to use HTML5 you just need to replace <dl> with <dialog>, with HTML4 you just keep it as it is, cleaner and doesn't need extra classes.

  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    that's cute, alex... now put the name after the quote and make it look acceptable with css turned off
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #6
    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)
    I don't think it looks bad using the name first with CSS turned off, but I guess that's a matter of preference, either way I think it's a nice way to handle the quote

    PS: The HTML spec says DT should come first and should assign the definition (or in the case of dialog, the speaker), DD should give the description / quote.

  7. #7
    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)
    I personally have to disagree with the DT, DL just because it relational doesn't mean it's in a definition list.

    Simple question: is the object (description) "James Bond" defining (term) "That xhtmlcoder is Da Bomb!". Or does "That xhtmlcoder is Da Bomb!" describe "James Bond" ?

    No, he is "citing" a phrase.

    As for HTML5 I don't know what semantic strangeness goes on with that language (due to being out of action for two-years) so I couldn't comment - if you use HTML5 as it not really a W3C Recommendation yet.

    Yes, it's relational but not a DL really - feel free to disagree it very grey area but I'd have to draw the line in the sand there for this specific case.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Actually I would be tempted to use a definition list as it's relational data (so semantically accurate), especially as HTML5 uses the dialog element...
    The dialog element was dropped. HTML5 now recommends using p elements.
    Simon Pieters

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote:

    Code:
    <blockquote><p>This product is awesome.</p></blockquote>
    <p>- Person's name</p>
    Dialogue:

    Code:
    <p>James Bond: That xhtmlcoder is Da Bomb!</p>
    <p>xhtmlcoder: I personally have to disagree</p>
    Simon Pieters

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    Quote:

    Code:
    <blockquote><p>This product is awesome.</p></blockquote>
    <p>- Person's name</p>
    To be really, really persnickety, shouldn't it be:

    Code:
    <blockquote><p>This product is awesome.</p></blockquote>
    <p>&mdash; Person's name</p>

  11. #11
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Black Max View Post
    To be really, really persnickety, shouldn't it be:
    not really, because there might be a css style for the entire blockquote, so i think the author P should be inside it
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  12. #12
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullquotes should generally be treated as blockquotes.
    Code:
    <blockquote>
      <p>Pocahontas is one hot chick.</p>
      <p><cite>John Smith</cite></p>
    </blockquote>
    Or
    Code:
    <blockquote>
      <p>Pocahontas is one hot chick. <cite>John Smith</cite></p>
    </blockquote>
    If you're going to use quote marks (css), you'll need to put the <p> with the <cite> outside the <blockquote>. That's probably more correct from a semantic and structural pov, anyway.

    See How to mark up quotes.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  13. #13
    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)
    At least nobody had me as "one hot chick" any insults I can live with.

    Though the cite attribute ([...] cite=http://www.example.org/ [...]) probably concluded it was a citation. Though it is still a good point to make.

    To further clarify why it couldn't be a DL in that (example) case; you only need to consider why we have H1-H6? If you were to use DL then that would be akin to making H1-H6 redundant - Entity Relationships and so on...

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    If you're going to use quote marks (css), you'll need to put the <p> with the <cite> outside the <blockquote>. That's probably more correct from a semantic and structural pov, anyway.
    I think this way would be most semantically correct.

  15. #15
    SitePoint Member sikatangpinoy's Avatar
    Join Date
    Dec 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks now I know the correct usage of blockqoute tag

  16. #16
    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)
    Quote Originally Posted by zcorpan View Post
    The dialog element was dropped. HTML5 now recommends using p elements.
    That's interesting, I wonder what made them drop it's use, it made sense to me as far as relational information because it's a definer (the individual) and the value (quote). Either way as this is the case I agree with gary's method of implementation using paragraphs and a citation for the author.


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
  •