Blockquotes

The usage of the <blockquote> element have been much diversified, but semantically it is only appropriate for one thing – marking up a section of you webpage that is quoted from another source. This means that if you want to make those fancy pull-quotes, the <blockquote> is not the element you should be using. Let’s have a look at how you should be using the blockquote element:

<article>
<header>
	<h1>All About Flour</h1>
	<p class="byline">by Jane Doe</p> 
</header>
<section>
	<h2>The Two Types of Wheat</h2>
	<p>There … to rise.</p>
	<p>Where … with less protein.</p>
</section>
<blockquote>
	Wholemeal flour, the whole grain milled as finely as possible with all of the outer bran and inner germ intact, is one of the best white flour improvers I know of. <br />
	Dan Lepard, <a href="http://www.danlepard.com">danlepard.com</a>
</blockquote>
<section>… </section>
</article>

As you can see, the quote is from another source and if you try out the example you will see that the quote is actually indented.

What you have learned

• The blockquote element is for quotes from other sources
• Pullqoutes should therefore not be marked up with the blockquote element, use the aside element instead
• The blockquote element is a block-level element