<blockquote>

Designates thematic content sections that is quoted from another source

Standard HTML

Definition and Usage

The <blockquote> element specifies a section that is quoted from another source. It indicates that the enclosed text is an extended quotation.

Browsers usually indent <blockquote> elements to visually distinguish them from surrounding text. The quotation can be accompanied by a citation using the cite attribute or the <cite> element.

Tip: Use <blockquote> for long, block-level quotations. For short, inline quotes, use the <q> tag instead.

Best Practice: Always attribute quotes to their source using the cite attribute or a <footer> element with citation information.

Browser Support

The <blockquote> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

Attribute	Value	Description
cite	URL	Specifies the source URL of the quotation. The URL should point to a page that explains the context or reference for the quote.

The <blockquote> tag also supports all HTML global attributes and event attributes.

Examples

Basic Blockquote

Simple quotation without citation:

Example
<blockquote>
  <p>The only way to do great work is to love what you do.</p>
</blockquote>

Blockquote with cite Attribute

Using the cite attribute to specify the source URL:

Example
<blockquote cite="https://www.example.com/quotes">
  <p>Innovation distinguishes between a leader and a follower.</p>
</blockquote>

Blockquote with Citation Element

Using the <cite> tag to display the source:

Example
<blockquote>
  <p>The future belongs to those who believe in the beauty of their dreams.</p>
  <cite>Eleanor Roosevelt</cite>
</blockquote>

Blockquote with Footer and Author

More structured approach using <footer>:

Example
<blockquote>
  <p>Be yourself; everyone else is already taken.</p>
  <footer>
    — <cite>Oscar Wilde</cite>
  </footer>
</blockquote>

Multi-Paragraph Blockquote

Quotation with multiple paragraphs:

Example
<blockquote>
  <p>Success is not final, failure is not fatal: it is the courage
     to continue that counts.</p>
  <p>If you're going through hell, keep going.</p>
  <footer>— <cite>Winston Churchill</cite></footer>
</blockquote>

Styled Blockquote with Custom CSS

Adding custom styling to blockquotes:

Example
<style>
  blockquote {
    margin: 24px 0;
    padding: 20px 20px 20px 60px;
    background: #f5f5f5;
    border-left: 5px solid #745af2;
    font-style: italic;
    position: relative;
  }

  blockquote::before {
    content: '"';
    font-size: 60px;
    color: #745af2;
    position: absolute;
    left: 10px;
    top: 10px;
  }

  blockquote p {
    margin: 0;
  }

  blockquote footer {
    margin-top: 12px;
    font-style: normal;
    color: #666;
  }
</style>

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

Blockquote with Quote Marks

Adding decorative quote marks using CSS:

Example
<style>
  .fancy-quote {
    position: relative;
    padding: 30px 40px;
    margin: 30px 0;
    font-size: 1.2em;
    line-height: 1.6;
  }

  .fancy-quote::before,
  .fancy-quote::after {
    position: absolute;
    font-size: 80px;
    color: #745af2;
    opacity: 0.3;
  }

  .fancy-quote::before {
    content: '\201C';
    top: -20px;
    left: 0;
  }

  .fancy-quote::after {
    content: '\201D';
    bottom: -40px;
    right: 0;
  }
</style>

<blockquote class="fancy-quote">
  <p>Life is what happens when you're busy making other plans.</p>
  <cite>John Lennon</cite>
</blockquote>

Nested Blockquotes

Quoting a quote (use sparingly):

Example
<blockquote>
  <p>As Shakespeare once wrote:</p>
  <blockquote>
    <p>To be, or not to be, that is the question.</p>
  </blockquote>
  <p>This quote has inspired millions.</p>
</blockquote>

Blockquote with Link to Source

Making the citation clickable:

Example
<blockquote cite="https://www.example.com/article">
  <p>The only impossible journey is the one you never begin.</p>
  <footer>
    — <cite><a href="https://www.example.com/article">
      Tony Robbins
    </a></cite>
  </footer>
</blockquote>

Twitter-Style Quote Box

Modern social media inspired design:

Example
<style>
  .tweet-quote {
    background: var(--bg-primary);
    border: 1px solid #e1e8ed;
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .tweet-quote p {
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .tweet-quote footer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #657786;
    font-size: 14px;
  }
</style>

<blockquote class="tweet-quote">
  <p>Stay hungry. Stay foolish.</p>
  <footer>
    <strong>@SteveJobs</strong> • <cite>Stanford Commencement 2005</cite>
  </footer>
</blockquote>

Blockquote with Language Attribute

Specifying the language of a foreign quote:

Example
<blockquote lang="fr">
  <p>La vie est belle.</p>
  <footer>— French proverb (Translation: Life is beautiful)</footer>
</blockquote>

Try it Yourself

Interactive Example

See how blockquotes appear with different styling:

The greatest glory in living lies not in never falling, but in rising every time we fall. — Nelson Mandela

In the end, it's not the years in your life that count. It's the life in your years.
— Abraham Lincoln

Try in Code Playground

Styling Tips

Common CSS properties for styling blockquotes:

CSS Property	Example Value	Effect
border-left	5px solid #745af2	Adds a vertical bar on the left side
padding-left	20px	Adds space between border and text
font-style	italic	Makes text italic (traditional quote style)
background	#f5f5f5	Adds background color to distinguish quote
margin	24px 0	Adds spacing above and below
quotes	'"' '"' ''' '''	Defines quotation marks for ::before/::after
box-shadow	0 2px 4px rgba(0,0,0,0.1)	Adds subtle shadow for depth

Accessibility Considerations

Use semantic HTML: The <blockquote> tag provides semantic meaning that helps screen readers
Include citations: Always attribute quotes using cite or <cite> for context
Language attribute: Use lang attribute for quotes in different languages
Avoid images of text: Don't use image quotes; use actual text for accessibility
Proper nesting: Ensure <p> tags are properly nested within <blockquote>
Contrast ratio: Maintain sufficient color contrast for quoted text
Don't rely on styling alone: Semantic HTML conveys meaning even without CSS

Blockquote vs Q Tag

Tag	Use Case	Example
<blockquote>	Long, block-level quotations (multiple sentences or paragraphs)	Extended passages, testimonials, article excerpts
<q>	Short, inline quotations within a paragraph	Brief quotes within running text

Best Practices

Always use paragraph tags: Wrap quote text in <p> tags within blockquote
Provide source attribution: Use cite attribute and/or <cite> element
Don't fabricate quotes: Only use real quotations from actual sources
Use appropriate styling: Make quotes visually distinct but still readable
Consider context: Provide enough context for the quote to make sense
Link to source when possible: Make citations clickable if the source is online
Use sparingly: Too many blockquotes can disrupt reading flow
Verify accuracy: Ensure quotes are accurate and not taken out of context

Related Tags

<q>
Defines short inline quotation
<cite>
Defines title of creative work
<footer>
Defines footer for section
<p>
Defines a paragraph