Question

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?

Was it helpful?

Solution

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.

OTHER TIPS

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>

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top