Blockquote Tag Examples
Examples of How the <blockquote> Tag Works
The BLOCKQUOTE tag is useful for including quotations of large blocks of text. It calls them out and separates them as being something other than the surrounding text.
- Basic Blockquote
- Blockquote with Citation
- Blockquote with Simple Border
- Blockquote with Narrower Width
- Blockquote with Background Color
- Blockquote with Embedded Quotation Marks
Return to the <blockquote> Tag information page.
Basic Blockquote
Blockquoted text is generally displayed as indented slightly and with no other formatting.
The time has come, the Walrus said, to speak of many things.
Some much older browsers would display blockquotes with other formatting including italics, but that is rare now.
<blockquote>
The time has come, the Walrus said, to speak of many things.
</blockquote>
Return to the <blockquote> Tag information page.
Blockquote with Citation
These two elements [Q and BLOCKQUOTE] designate quoted text.
(Note: The » symbol indicates a line wrap.)
<blockquote cite="http://www.w3.org/TR/1999/ »
REC-html401-19991224/struct/text.html# »
edef-BLOCKQUOTE">
These two elements [Q and BLOCKQUOTE] designate quoted text.
</blockquote>
Return to the <blockquote> Tag information page.
Blockquote with Simple Border
Now is the time for all good men to come to the aid of their country.
<blockquote style="border: 2px solid #000;">
Now is the time for all good men to come to the aid of their country.
</blockquote>
Return to the <blockquote> Tag information page.
Blockquote with Narrower Width
Now is the time for all good men to come to the aid of their country.
<blockquote style="width:150px;">
Now is the time for all good men to come to the aid of their country.
</blockquote>
Return to the <blockquote> Tag information page.
Blockquote with Background Color
Now is the time for all good men to come to the aid of their country.
<blockquote style="background-color: #ccc;">
Now is the time for all good men to come to the aid of their country.
</blockquote>
Return to the <blockquote> Tag information page.
Blockquote with Embedded Quotation Marks
Now is the time for all good men to come to the aid of their country.
<style type="text/css">
#embedded-content {
quotes: "\201C" "\201D"
}
blockquote#embedded-content:before {
content: open-quote;
font-weight: bold;
}
blockquote#embedded-content:after {
content: close-quote;
font-weight: bold;
}
</style>
<blockquote id="embedded-content">
Now is the time for all good men to come to the aid of their country.
</blockquote>
Return to the <blockquote> Tag information page.
