blockquote

The blockquote element represents a section quoted from another source, providing visual and semantic distinction from the surrounding content.

Overview

The <blockquote> element indicates that the enclosed text is an extended quotation. It is styled with a left border and italic text to visually set it apart from regular content.

This is a blockquote. It is styled with a left border and muted color to set it apart from regular paragraph text. Use blockquotes for quotations from other sources.

When to Use

  • Extended quotations - Quotes from external sources, books, or articles
  • Testimonials - Customer quotes or endorsements
  • Pull quotes - Highlighted excerpts from the current article
  • Citations - Academic or legal references

When Not to Use

  • For short inline quotes within a sentence (use <q> instead)
  • For content that isn't a quotation (even if you want the visual style)
  • For indenting content (use CSS margins instead)

Basic Examples

Simple Blockquote

The best way to predict the future is to invent it.
<blockquote> The best way to predict the future is to invent it. </blockquote>

Multi-paragraph Blockquote

First paragraph of the quote. Long quotations may contain multiple paragraphs.

Second paragraph continues the thought. Each paragraph maintains proper spacing within the blockquote.

<blockquote> <p>First paragraph of the quote...</p> <p>Second paragraph continues...</p> </blockquote>

Attribution

Include the source of a quote using a <footer> or <cite> element inside the blockquote.

Using Footer

The best way to predict the future is to invent it.
Alan Kay
<blockquote> The best way to predict the future is to invent it. <footer>Alan Kay</footer> </blockquote>

Using Cite

Good design is as little design as possible. Dieter Rams
<blockquote> Good design is as little design as possible. <cite>Dieter Rams</cite> </blockquote>

Full Attribution with Source

Any sufficiently advanced technology is indistinguishable from magic.
Arthur C. Clarke, Profiles of the Future
<blockquote cite="https://example.com/source"> Any sufficiently advanced technology is indistinguishable from magic. <footer>Arthur C. Clarke, <cite>Profiles of the Future</cite></footer> </blockquote>

Testimonials

Blockquotes work well for customer testimonials and reviews.

This product completely transformed our workflow. We have seen a 40% increase in productivity since implementing it.
Jane Smith, CEO of TechCorp
The best decision we made this year. The support team is incredibly responsive and the documentation is excellent.
John Doe, Lead Developer

CSS Properties

blockquote { padding-inline-start: var(--size-m); border-inline-start: var(--border-width-thick) solid var(--color-border); color: var(--color-text-muted); font-style: italic; } /* Attribution */ blockquote footer, blockquote cite { display: block; margin-block-start: var(--size-s); font-style: normal; font-size: var(--font-size-sm); &::before { content: "— "; } }

Key Features

  • Left border - Uses border-inline-start for RTL language support
  • Muted color - Distinguishes quoted text from regular content
  • Italic text - Traditional styling for quoted content
  • Em dash - Automatically prepends attribution with "-- "

Inline Quotes vs Blockquotes

Use <q> for short inline quotes within a sentence, and <blockquote> for longer, standalone quotations.

Inline Quote Example

As the saying goes, less is more, which applies perfectly to minimalist design.

Blockquote for Longer Content

In his essay on design, Dieter Rams wrote:

Good design is as little design as possible. Less, but better because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Dieter Rams

Accessibility

Best Practices

  • Provide attribution - Always cite the source when quoting external content
  • Use the cite attribute - Add a URL to the source when available
  • Semantic meaning - Only use blockquote for actual quotations
  • Context - Introduce quotes with surrounding text that explains their relevance

Screen Reader Behavior

Screen readers may announce blockquotes differently:

  • Some announce "blockquote" before reading the content
  • Users can navigate between blockquotes on a page
  • The cite attribute is not announced but is available programmatically

Language Considerations

If quoting content in a different language, use the lang attribute:

Je pense, donc je suis.
Rene Descartes
<blockquote lang="fr"> Je pense, donc je suis. <footer>Rene Descartes</footer> </blockquote>
  • <q> - For short inline quotations
  • <cite> - For citing the title of a work
  • <p> - Regular paragraphs for non-quoted content
  • <figure> - Can wrap blockquote with figcaption for pull quotes