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.

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.

Although not required by the standard, browsers may format the text in a quotation in some way. The most common way may consist of rendering blockquote elements with indentation.

Any attribution of the work to its author must be placed outside the blockquote element. The contents of this element should only belong to the cited work.

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.

X

Are you looking for a place to host your next website? I can help you with that!