TOC

The community is working on translating this tutorial into Spanish, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

HTML Basics:

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
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!