"Correct" way to mark up testimonials in HTML

Question

I thought this would be an easy enough thing to find online but it seems not. I'm trying to find out what would be considered the correct way to mark up a list of testimonials - quotes with authors - on a page.

e.g.

"This is what I think"
- My Name, My Company

I'd imagine the quote should go in a blockquote. I've also seen some use of cite to shown where a quote comes from but the HTML reference seems to show that this should be used to give the URL of a web page that the quote comes from, not the name of the person.

Does anyone have any suggestions for how this should be marked up?

Answer 1

The "old" way:

I might be chiming in very late, but I think the following is the correct way to mark up a testimonial:

<figure>     <blockquote>         "This is what I think"     </blockquote>     <footer>         — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>     </footer> </figure> 

Per the W3C spec:

...the citation is contained within the footer of a figure element, this groups and associates the information, about the quote, with the quote...

.

.

.

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence)...

Update:

As @MCTaylor17 has pointed out, the best practice has changed in regards to citing a quote. Here's the new spec (as of December 2017): https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element

Now the <cite> element is expected anywhere you would expect Phrasing Content. This means that it should go within a <p>, <blockquote>, etc.

Example 17 in the spec demonstrates using a <cite> within a <blockquote>:

  <blockquote>"Money is the real cause of poverty,"   <footer>   <cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>   </footer>   </blockquote> 

To apply this to your own quote:

<blockquote>     "This is what I think"     <footer>         — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>     </footer> </blockquote> 

Answer 2

You are correct in your assumption that a quote is supposed to go into a blockquote element and that the cite attribute should be used for the URI. Personally I handle the author of the quote with a separate div or p at the bottom of the quote like so:

<blockquote cite="http://a.uri.com/">     <p>This is a really insightful sentence.</p>     <p class="quoteCite">Darko Z</p> </blockquote> 

Then I just use CSS to make it look nice. Pretty basic. You might want to go look at Microformats.org as well and search around for ideas.

Hope this helps

EDIT: Its late and it slipped my mind but you could also use the cite element

<blockquote cite="http://a.uri.com/">     <p>This is a really insightful sentence.</p>     <cite>Darko Z</cite> </blockquote> 

but im not a 100% sure how well its supported, to be honest

EDIT 2: According to the HTML 5 draft, cite shoudn't be an author name so for future proofing you probably shouldn't use cite for that purpose.