blockquote element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The blockquote
element allows authors to insert quotations in the form of blocks of content, usually composed by a paragraph, a group of paragraphs or a set of many other elements including images (img
), tables (table
) and articles (article
), among others. This is the main difference between this element and q
, that's designed to quote only simple runs of intra-paragraph text.
Additionally, the resource from where the quotation was extracted can be specified in the cite
attribute, by providing its URL.
Examples
In the example below, a paragraph has been quoted from the book "A game of thrones" by George R. R. Martin. The URL of the book page in Martin's website is provided in the cite
attribute. Note how the attribution to the author is correctly made outside the blockquote
element.
<p>Then again, we can see how distance and memories made his soul gloomy:</p>
<blockquote cite="http://www.georgerrmartin.com/grrm_book/a-game-of-thrones-a-song-of-ice-and-fire-book-one/">
<p>He had no destination in mind. He wanted only to ride. He followed the creek for a time, listening to the icy trickle of water over rock, then cut across the fields to the kingsroad.</p>
</blockquote>
<p>— Goerge R. R. Martin</p>
Then again, we can see how distance and memories made his soul gloomy:
He had no destination in mind. He wanted only to ride. He followed the creek for a time, listening to the icy trickle of water over rock, then cut across the fields to the kingsroad.
— Goerge R. R. Martin
Now, the blockquote
element is used in another very usual way, to wrap quotations in a forum. If you ever used a forum, you'll know that any post can have a quote of another post. Here, a user is quoting and responding to the user of the previous post.
<p><b>Mark</b> said on 04/04/2014</p>
<blockquote>
<p>I don't think this is going to be a major change in the game. Anyway, if there is a change, it could be for better too...</p>
</blockquote>
<p>You have to be kidding me Mark! This is going to rip out the comunity...</p>
Mark said on 04/04/2014
I don't think this is going to be a major change in the game. Anyway, if there is a change, it could be for better too...
You have to be kidding me Mark! This is going to rip out the comunity...
Lastly, another usual example, this time using the blockquote
element together with cite
, to wrap the name of the work where the quotation was extracted from.
<p>It's been made very clear in the <cite>HTML</cite> specification:</p>
<blockquote>
<p>Attribution for the quotation, if any, must be placed outside the blockquote element.</p>
</blockquote>
It's been made very clear in the HTML specification:
Attribution for the quotation, if any, must be placed outside the blockquote element.
Attributes
Specific attributes
cite
The URL of the resource from where the quotation has been extracted.
Example
<blockquote cite="http://en.wikipedia.org/wiki/Totalitarianism">
<p>Totalitarianism or totalitarian state is a concept used by some political scientists to describe a political system in which the state holds total authority over the society and seeks to control all aspects of public and private life wherever possible.</p>
</blockquote>
Totalitarianism or totalitarian state is a concept used by some political scientists to describe a political system in which the state holds total authority over the society and seeks to control all aspects of public and private life wherever possible.
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.