Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the best way to markup a testimonial in XHTML?

I used to just use p and span elements for this... but I'm always pushing to use the right elements, and this is something I haven't really thought about before with regard to testimonials.

This is what I had in mind...

<div class="testimonial">
 <blockquote>I love your products!</blockquote>
 <span>Jim Testimonial-giver</span>
</div>

Does that look like the best way to do this? Is there a best practice?

I looked at how the W3C markup testimonials on their site, and they have used...

<blockquote>
 <p>
  <a id="aptest" name="aptest">Applied Testin.....</a>
  <br />
  <span class="QuoteAttr">-- Shane P. M...</span>
 </p>
</blockquote>

Should I just copy how the W3C did it, after all shouldn't they be correct?

like image 659
alex Avatar asked Apr 17 '09 02:04

alex


3 Answers

Use the cite tag:

<div class="testimonial">
 <blockquote>i love your products</blockquote>
 <cite>Jim Testimonial-giver</cite>
</div>

Also I would probably do it like this:

<blockquote class="testimonial">
  i love your products
  <cite>Jim Testimonial-giver</cite>
</blockquote>

Just to make it slightly more semantic and clearly tie the citation with the quote. Divs should only be necessary for structural things.

like image 83
Rex M Avatar answered Oct 16 '22 12:10

Rex M


The Mozilla.org style guide seems to prefer using q for the quotation and <cite> for the author, wrapped in a <blockquote> or a <div> with an appropriate class. HTML 5 seems to strongly frown on using <cite> for people's names; it says that it should only be used for the titles of works.

Following that model, perhaps something like this:

<blockquote class="testimonial">
  <q>I love your products!</q>
  <cite>Jim Testimonial-giver</cite>
</blockquote>

Or if you don't want to use <cite>, then:

<blockquote class="testimonial">
  <q>I love your products!</q>
  <span class="quote-attribution">Jim Testimonial-giver</span>
</blockquote>
like image 35
Brian Campbell Avatar answered Oct 16 '22 11:10

Brian Campbell


For a long time I used Tantek Çelik's slide as a reference when it came to quotations.

But seeing the comments by alex and Rex M, I'm thinking about this implementation for testimonials:

<ul id="testimonials">
  <li>
    <blockquote>
      i love your products
    </blockquote>
    <cite>&mdash;Jim Testimonial-giver</cite>
  </li>
  <li>
    <blockquote>
      i love your products even more
    </blockquote>
    <cite>&mdash;Joe Testimonial-giver</cite>
  </li>
  [...]
</ul>
like image 45
Marius Butuc Avatar answered Oct 16 '22 11:10

Marius Butuc