References

Beginner-friendly references for web development, with live, editable examples.

The HTML <blockquote> tag

Element All modern browsers Updated
Quick answer

The HTML <blockquote> element represents a block-level quotation from another source. The cite attribute can give the source URL; attribute the quote visibly with a <cite> outside the blockquote.

Overview

The <blockquote> element marks an extended quotation that is set off from the surrounding text as its own block. Browsers indent it by default, signaling that the content is borrowed from another source.

Record where the quote came from with the cite attribute, which holds the source's URL — note that this is metadata and is not shown on the page. For a visible credit, place a <cite> with the work's title after or just outside the quotation, often inside a <figure> with a <figcaption> for the attribution.

For a short quotation that flows inline within a sentence, use <q> instead, which adds the quotation marks for you. Style the default indentation and any decorative quote marks with CSS.

Syntax

<blockquote cite="https://example.com">
  <p>The quoted text.</p>
</blockquote>

Attributes

The <blockquote> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
cite A URL. Cites the source URL of a quote or edit.

Example

Live example 
<blockquote style="border-left:4px solid #cbd5e1;margin:0;padding-left:12px;color:#475569;">
  <p>Simplicity is the soul of efficiency.</p>
</blockquote>

Best practices

  • Use <blockquote> for longer, block-level quotations set apart from the text.
  • Put the source URL in the cite attribute (metadata) and a visible credit in a <cite> outside the quote.
  • For short inline quotations, use <q> instead.
  • Restyle the default indentation with the CSS margin and add decorative quote marks with ::before if desired.

Frequently asked questions

What is the difference between blockquote and q?
<blockquote> is for longer, block-level quotations; <q> is for short quotations that flow inline within a sentence.
How do I credit the source of a blockquote?
Put the source URL in the cite attribute (not shown), and add a visible credit with a <cite> after or outside the quote.
Does the cite attribute show on the page?
No. It is machine-readable metadata only. For a visible citation, use the <cite> element.
How do I remove or change the default indentation?
Override the browser's default margin on the <blockquote> with CSS.
bdo body