"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.
The <blockquote>
tag defines a long quotation.
By default, the text is rendered as an indented block of text.
The optional cite attribute sets the URL source of the quotation.
A <blockquote>
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>
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>
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.
To stand out, <blockquote>
s can be 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>
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 |