The HTML <blockquote> element is used to indicate a more extended quotation or citation taken from elsewhere. It is typically used to set off a block of text quoted directly from a source, such as a book or article.
The abbreviation “blockquote” stands for “block quotation.”
Syntax
The syntax for the <blockquote> tag is straightforward:
1 |
<blockquote>
|
2 |
<p>Quoted text goes here.</p> |
3 |
<footer>Source of the quote</footer> |
4 |
</blockquote>
|
This syntax creates a block-level element that can contain one or more paragraphs of quoted text and a footer element that can be used to provide attribution or a source for the quote.
Example
1 |
<p>Here is a quote from Jane Austen’s Pride and Prejudice:</p> |
2 |
<blockquote> |
3 |
<p>“It is a truth universally acknowledged, that a single man in possession |
4 |
of a good fortune, must be in want of a wife.”</p> |
5 |
<footer>Jane Austen, Pride and Prejudice</footer> |
6 |
</blockquote> |
Here’s another example; an alternative method of marking up a blockquote using figure and figcaption tags, and this time with a little CSS.
In this example, the <blockquote> element sets off the quote from the rest of the text, and the <figcaption> feature provides attribution. You may optionally use the cite attribute to link to, and the <cite> element to display the original source (note that browsers will display the <cite> tag with italicized text by default).
Attributes
The <blockquote> element has no required attributes, but it can use the following optional attributes:
-
cite: Specifies the URL of the source of the quote. This attribute can be used to link to the quote’s original source.
Related HTML Elements
-
For shorter quotes which appear inline, the
<q>(quotation) element is more suitable.
Content
The <blockquote> element can contain any block-level element, including text, headings, lists, and other HTML elements.
<blockquote> element is often styled using pseudo-elements.Learn More
HTML Elements
By
