HTML <blockquote> Tag

The <blockquote> tag defines a long quotation. The name ‘blockquote‘ indicates is‘s a block-level container -- like a <div> -- with implicit line breaks before and after the quote.

HTML Tag

Example

#

A <blockquote> tag with a quote from president Kennedy‘s inaugural speech.

And so, my fellow Americans: ask not what your country can do for you – ask what you can do for your country. My fellow citizens of the world: ask not what America will do for you, but what together we can do for the freedom of man.
-- President Kennedy, 1961, Inaugural address
<acticle>
  <blockquote>
     And so, my fellow Americans: ask not what your country 
     can do for you – ask what you can do for your country. 
     My fellow citizens of the world: ask not what America 
     will do for you, but what together we can do for the 
     freedom of man.
  </blockquote> 

  -- President Kennedy, 1961, Inaugural address
</article>

Using <blockquote>

The <blockquote> tag is used to specify long quotations -- hence the name 'block'.

By default, this element is rendered as an indented block of text.

The optional cite attribute specifies the URL source of the quotation.

More Examples

A <blockquote> with a cite (citation) attribute.
This quote is from a Martin Luther King speach.

"I still have a dream, a dream deeply rooted in the American dream – one day this nation will rise up and live up to its creed, We hold these truths to be self evident: that all men are created equal."
-- Martin Luther King Jr.
<article>
  <blockquote cite="https://https://en.wikipedia.org/wiki/I_Have_a_Dream">
    "I still have a dream, a dream deeply rooted in the 
     American dream – one day this nation will rise up 
     and live up to its creed, We hold these truths to 
     be self evident: that all men are created equal."
  </blockquote>
  -- Martin Luther King Jr.
</article>

Attributes for <blockquote>

This table lists the <blockquote> tag attributes.

Attribute Value Description
cite URL Citation of the quote, expressed as a URL
id    identifier Defines a unique identifier for the blockquote.
class    classnames Sets one or more CSS classes to be applied to the blockquote.
style    CSS-styles Sets the style for the blockquote.
data-*    value Defines additional data that can be used by JavaScript.
title    text Sets a title that displays as a tooltip.

For other global attributes see our global attributes list.


Did you know?

Did you know?

Styling a <blockquote>

To stand out, <blockquote>s are often given a different style.
This quotation is styled with CSS.

“I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character. I have a dream today!”
-- Martin Luther King Jr.
<style>
 .bluequote {
   background-color: #ecf3f6;
   border-left:3px solid #678;
   font-style:italic;
   white-space: pre;
   margin: 20px;
   padding:0 0 20px;
 }
</style>

<article>
  <blockquote class="bluequote">
    “I have a dream that my four little children 
     will one day live in a nation where they will 
     not be judged by the color of their skin, but 
     by the content of their character. I have a 
     dream today!” 
  </blockquote>
  -- Martin Luther King Jr.
<article>

Browser support

Here is when <blockquote> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides