<blockquote> represents an extended quotation from another source. It accepts flow content, so the quote may contain several paragraphs. Its usual indentation is presentation, not its defining feature.
Quote and attribution
This invented passage demonstrates the structure. The author and work title sit outside the blockquote, in the figure’s caption.
HTML and CSS
HTML
<figure>
<blockquote cite="https://example.com/garden-notes">
<p>Leave enough room for the plants you hope will grow.</p>
</blockquote>
<figcaption>
Alex Example, <cite>Garden Notes</cite> (fictional example)
</figcaption>
</figure>CSS
blockquote {
margin: 0;
border-left: 3px solid #2563eb;
padding-left: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Source information
cite is a URL identifying the quotation’s source. Browsers do not usually display that attribute as a visible attribution or link, so supply one in readable content. The cite element marks a work’s title, not an author’s name.
Use q for a short quotation inside a sentence. Do not use blockquote just to indent ordinary text; set CSS margin or padding on the appropriate element.
Inspect the boundaries
Read only the blockquote’s text in the example. It contains the quotation, not the attribution. Remove its border and indentation: the quote remains a quote. Add a second paragraph when the quoted passage actually spans paragraphs.
Sources and browser support
MDN: blockquote describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.