CODEWITHSUNDEEP
html
Cameron
Cameron

Reputation: 28783

Correct HTML Blockquote

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>

Upvotes: 14

Views: 15672

Answers (4)

dallen
dallen

Reputation: 2651

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>

Upvotes: 26

Ziggy
Ziggy

Reputation: 22365

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.

Upvotes: -1

Alohci
Alohci

Reputation: 82976

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>

Upvotes: 4

Adrienne Boswell
Adrienne Boswell

Reputation: 1

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.

Upvotes: 0

Related Questions