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: Click here to help us translate this article into your language!