Correct HTML Blockquote

What is the correct way to show a HTML5 blockquote?

I have the following:

<blockquote>
    <p>Lorem ipsum dolor sit amet, conse开发者_如何学Pythonctetur 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>

---

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>

---

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>

---

Semantically the following makes sense, use the cite attribute inside the blockquote element to cite a particular URL, and the cite element (inline) before the ending blockquote tag like so:

<div>
<blockquote cite="http://example.com">
<p>The quick brown fox jumps over the lazy dog</p>
<cite>Illustrative Shorthand</cite> by Linda Bronson (1888)
</blockquote>
</div>

The quick brown fox jumps over the lazy dog.

Illustrative Shorthand by Linda Bronson

Remember, blockquote is for long quotations, so although the above is technically correct, better would be:

<div>
<q>The quick brown fox jumps over the lazy dog</q> 
<cite>Illustrative Shorthand</cite> by Linda Bronson (1888)
</div>

"The quick brown fox jumps over the lazy dog" Illustrative Shorthand by Linga Bronson

If you want to emphasize the author's name, you could use b. Note that cite is used for the name of the book, in this case Illustrative Shorthand.

---

Attribution for the quotation, if any, must be placed outside the blockquote element.

— W3C HTML Working Group

The W3C provides a bunch of examples of different ways to attribute block quotes in this draft. You might also read this blog article, which I read before coming here. The following example is based on their recommendation:

<blockquote>
 <p>Attribution for the quotation, if any, must be placed outside the blockquote element.</p>
</blockquote>
<p>— W3C HTML Working Group</p>

They go on to give an example using <figure> and <figcaption> in exactly the manner @Alohci uses it above.