Correct HTML Blockquote

Question

What is the correct way to show a HTML5 blockquote?

I have the following:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <cite>John Doe<br/>ACME Industries</cite>
</blockquote>

But I'm not sure if it's correct to place the cite INSIDE the blockquote and would want to style it appropiately but if I move it out of the quote I would need to wrap it with a div to give unique styling properties. Thoughts? Thanks

Also according to: http://dev.w3.org/html5/spec/Overview.html#the-cite-element I should use <b> tags for the names?

Would this be correct?

<div class="testimonial">
    <blockquote>
        <p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>  
    </blockquote>
    <p><b>John Doe</b><br />ACME Industries</p>
</div>

Answer 1

Based on recent changes in the HTML specifications, this is now the proper way to handle blockquotes with citation.

<blockquote>
    <p>Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
    <footer>
        — <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
    </footer>
</blockquote>

Answer 2

I think that your second form is better than your first. I don't think that the attribution of the quote should be inside the <blockquote>.

The <b> tag use is up to you, it's probably technically correct as per the spec, but it's semantically useless for all practical purposes.

On the other hand, the <br/> looks wrong, it seems hard to justify that a semantic line break is called for there. If you want to show the name and organisation on separate lines, then that's presentational and should be done with CSS.

On whether on not to use the <cite> element, it wouldn't be correct per the HTML5 spec, but see http://24ways.org/2009/incite-a-riot by Jeremy Keith for an alternative viewpoint.

It's very subjective, but I might be tempted to do something like

<figure class="testimonial">
    <blockquote>
        <p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>  
    </blockquote>
    <figcaption class="attribution">
       <span class="name">John Doe</span> <span class="organisation">ACME Industries</span>
    </figcaption>
</figure>