<blockquote> - Block Quotation

The `<blockquote>` Element

Block-level HTML 2.0

The <blockquote> element represents an extended quotation from another source. It’s used for longer quotes that should be displayed as a separate block, distinct from the surrounding text.

Quick Example

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

<p>This famous quote inspires innovation and action.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

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

<p>This famous quote inspires innovation and action.</p>

Syntax

<blockquote cite="source-url">
  <p>Quoted text goes here.</p>
</blockquote>

The <blockquote> element wraps quotation content. Use the cite attribute to reference the source URL.

Attributes

cite Attribute

The cite attribute specifies the URL of the source:

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

Global Attributes

The <blockquote> element supports all global attributes like id, class, style, and lang.

Common Use Cases

Basic Quotation

<p>As Steve Jobs once said:</p>

<blockquote>
<p>Innovation distinguishes between a leader and a follower.</p>
</blockquote>

<p>This quote emphasizes the importance of creative thinking.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>As Steve Jobs once said:</p>

<blockquote>
<p>Innovation distinguishes between a leader and a follower.</p>
</blockquote>

<p>This quote emphasizes the importance of creative thinking.</p>

With Citation

<blockquote cite="https://www.w3.org/standards/webdesign/accessibility">
<p>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
<footer>— <cite>Tim Berners-Lee, W3C Director and inventor of the World Wide Web</cite></footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote cite="https://www.w3.org/standards/webdesign/accessibility">
<p>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
<footer>— <cite>Tim Berners-Lee, W3C Director and inventor of the World Wide Web</cite></footer>
</blockquote>

Multiple Paragraphs

<blockquote>
<p>Web design is not just about creating pretty layouts. It's about understanding the user's journey and creating a seamless experience.</p>

<p>Every pixel, every interaction, and every word contributes to the overall user experience.</p>

<footer>— <cite>Anonymous Designer</cite></footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote>
<p>Web design is not just about creating pretty layouts. It's about understanding the user's journey and creating a seamless experience.</p>

<p>Every pixel, every interaction, and every word contributes to the overall user experience.</p>

<footer>— <cite>Anonymous Designer</cite></footer>
</blockquote>

Article Quotation

<article>
<h2>The Importance of Semantic HTML</h2>

<p>Semantic HTML provides meaning to your content. As the HTML specification states:</p>

<blockquote cite="https://html.spec.whatwg.org/">
  <p>Authors are encouraged to use elements that describe the meaning of their content, rather than elements that describe the desired presentation.</p>
</blockquote>

<p>This approach improves accessibility and SEO.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>The Importance of Semantic HTML</h2>

<p>Semantic HTML provides meaning to your content. As the HTML specification states:</p>

<blockquote cite="https://html.spec.whatwg.org/">
  <p>Authors are encouraged to use elements that describe the meaning of their content, rather than elements that describe the desired presentation.</p>
</blockquote>

<p>This approach improves accessibility and SEO.</p>
</article>

Styling Blockquotes

Classic Style

<style>
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid #3b82f6;
  background-color: #f3f4f6;
  font-style: italic;
}
blockquote p {
  margin: 0;
}
</style>

<blockquote>
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
<footer>— Steve Jobs</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid #3b82f6;
  background-color: #f3f4f6;
  font-style: italic;
}
blockquote p {
  margin: 0;
}
</style>

<blockquote>
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
<footer>— Steve Jobs</footer>
</blockquote>

Modern Card Style

<style>
.quote-card {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
.quote-card::before {
  content: '"';
  font-size: 4rem;
  color: #3b82f6;
  position: absolute;
  top: 1rem;
  left: 1rem;
  line-height: 1;
}
.quote-card p {
  margin: 2rem 0 1rem 2rem;
  font-size: 1.1rem;
}
</style>

<blockquote class="quote-card">
<p>The only way to do great work is to love what you do.</p>
<footer>— Steve Jobs</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.quote-card {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
.quote-card::before {
  content: '"';
  font-size: 4rem;
  color: #3b82f6;
  position: absolute;
  top: 1rem;
  left: 1rem;
  line-height: 1;
}
.quote-card p {
  margin: 2rem 0 1rem 2rem;
  font-size: 1.1rem;
}
</style>

<blockquote class="quote-card">
<p>The only way to do great work is to love what you do.</p>
<footer>— Steve Jobs</footer>
</blockquote>

Colored Border Style

<style>
.bordered-quote {
  border-left: 5px solid #10b981;
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: #1f2937;
}
.bordered-quote p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0.5rem 0;
}
.bordered-quote footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}
</style>

<blockquote class="bordered-quote">
<p>Code is like humor. When you have to explain it, it's bad.</p>
<footer>— Cory House</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.bordered-quote {
  border-left: 5px solid #10b981;
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: #1f2937;
}
.bordered-quote p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0.5rem 0;
}
.bordered-quote footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}
</style>

<blockquote class="bordered-quote">
<p>Code is like humor. When you have to explain it, it's bad.</p>
<footer>— Cory House</footer>
</blockquote>

Large Quote Style

<style>
.large-quote {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  margin: 2rem 0;
  color: #1e40af;
}
.large-quote footer {
  font-size: 1rem;
  margin-top: 1rem;
  color: #6b7280;
}
</style>

<blockquote class="large-quote">
<p>Simplicity is the ultimate sophistication.</p>
<footer>— Leonardo da Vinci</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.large-quote {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  margin: 2rem 0;
  color: #1e40af;
}
.large-quote footer {
  font-size: 1rem;
  margin-top: 1rem;
  color: #6b7280;
}
</style>

<blockquote class="large-quote">
<p>Simplicity is the ultimate sophistication.</p>
<footer>— Leonardo da Vinci</footer>
</blockquote>

Attribution Best Practices

Using the cite Element

<blockquote cite="https://www.example.com/article">
<p>The web is more a social creation than a technical one. I designed it for a social effect—to help people work together—and not as a technical toy.</p>
<footer>
  — <cite>Tim Berners-Lee</cite>,
  <cite>Weaving the Web</cite>
</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote cite="https://www.example.com/article">
<p>The web is more a social creation than a technical one. I designed it for a social effect—to help people work together—and not as a technical toy.</p>
<footer>
  — <cite>Tim Berners-Lee</cite>,
  <cite>Weaving the Web</cite>
</footer>
</blockquote>

With Link to Source

<blockquote>
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<footer>
  — <cite>Martin Fowler</cite>,
  <a href="https://example.com/source">Refactoring: Improving the Design of Existing Code</a>
</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote>
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<footer>
  — <cite>Martin Fowler</cite>,
  <a href="https://example.com/source">Refactoring: Improving the Design of Existing Code</a>
</footer>
</blockquote>

With Publication Details

<blockquote cite="https://example.com/article">
<p>Programs must be written for people to read, and only incidentally for machines to execute.</p>
<footer>
  — <cite>Harold Abelson and Gerald Jay Sussman</cite><br>
  Structure and Interpretation of Computer Programs (1985)
</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote cite="https://example.com/article">
<p>Programs must be written for people to read, and only incidentally for machines to execute.</p>
<footer>
  — <cite>Harold Abelson and Gerald Jay Sussman</cite><br>
  Structure and Interpretation of Computer Programs (1985)
</footer>
</blockquote>

Common Patterns

Pull Quote

<style>
.pull-quote {
  width: 40%;
  float: right;
  margin: 0 0 1rem 1.5rem;
  padding: 1rem;
  border-top: 3px solid #3b82f6;
  border-bottom: 3px solid #3b82f6;
  font-size: 1.25rem;
  font-style: italic;
  color: #1e40af;
}
</style>

<p>Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.</p>

<blockquote class="pull-quote">
<p>The power of the Web is in its universality.</p>
</blockquote>

<p>More specifically, people can perceive, understand, navigate, and interact with the Web, and they can contribute to the Web.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.pull-quote {
  width: 40%;
  float: right;
  margin: 0 0 1rem 1.5rem;
  padding: 1rem;
  border-top: 3px solid #3b82f6;
  border-bottom: 3px solid #3b82f6;
  font-size: 1.25rem;
  font-style: italic;
  color: #1e40af;
}
</style>

<p>Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.</p>

<blockquote class="pull-quote">
<p>The power of the Web is in its universality.</p>
</blockquote>

<p>More specifically, people can perceive, understand, navigate, and interact with the Web, and they can contribute to the Web.</p>

Testimonial

<style>
.testimonial {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}
.testimonial p {
  font-style: italic;
  margin: 0 0 1rem 0;
}
.testimonial footer {
  display: flex;
  align-items: center;
  font-style: normal;
}
</style>

<blockquote class="testimonial">
<p>"This service completely transformed how we build websites. The documentation is clear, and the support team is fantastic!"</p>
<footer>
  <strong>Jane Smith</strong>, CEO at WebCorp
</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.testimonial {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}
.testimonial p {
  font-style: italic;
  margin: 0 0 1rem 0;
}
.testimonial footer {
  display: flex;
  align-items: center;
  font-style: normal;
}
</style>

<blockquote class="testimonial">
<p>"This service completely transformed how we build websites. The documentation is clear, and the support team is fantastic!"</p>
<footer>
  <strong>Jane Smith</strong>, CEO at WebCorp
</footer>
</blockquote>

Accessibility

Screen readers announce blockquotes as quotations:

<!-- Screen reader: "Block quote: The quoted text. End quote." -->
<blockquote>
  <p>The quoted text.</p>
</blockquote>

Provide Attribution

Always attribute quotes when possible:

Good
Missing Context

<blockquote>
  <p>Quality is not an act, it is a habit.</p>
  <footer>— Aristotle</footer>
</blockquote>

<blockquote>
  <p>Quality is not an act, it is a habit.</p>
  <!-- No attribution - users don't know the source -->
</blockquote>

<div style="margin-left: 2rem;">
  <p>Indented content that's not a quote.</p>
</div>

<blockquote>
  <p>Not a quote, just indented text.</p>
</blockquote>

Short Quotes vs Block Quotes

Use blockquote for Extended Quotes

<p>For short quotes, use the <q>inline quote element</q> like this.</p>

<p>For longer quotes, use a block quote:</p>

<blockquote>
<p>This is a longer quotation that deserves to be set apart from the main text. It provides extended context and should be displayed as a distinct block.</p>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>For short quotes, use the <q>inline quote element</q> like this.</p>

<p>For longer quotes, use a block quote:</p>

<blockquote>
<p>This is a longer quotation that deserves to be set apart from the main text. It provides extended context and should be displayed as a distinct block.</p>
</blockquote>

SEO Considerations

cite Attribute for Sources

Search engines may use the cite attribute:

<blockquote cite="https://www.authoritative-source.com/article">
  <p>Important industry insight from a trusted source.</p>
</blockquote>

Unique Content

Avoid using extensive quoted content without original commentary:

Good
Avoid

<p>The HTML specification provides important guidance on semantic markup:</p>

<blockquote cite="https://html.spec.whatwg.org/">
  <p>Use semantic elements to describe content meaning.</p>
</blockquote>

<p>Following this advice improves both accessibility and SEO...</p>

<!-- Page with only quoted content and no original value -->
<blockquote>...</blockquote>
<blockquote>...</blockquote>
<blockquote>...</blockquote>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <blockquote> element has been supported since early HTML versions.

For short inline quotations. Learn more →

For citing the title of creative works. Learn more →

Self-contained content with optional caption. Learn more →

<blockquote> - Block Quotation

The <blockquote> Element

Quick Example

Syntax

Attributes

cite Attribute

Global Attributes

Common Use Cases

Basic Quotation

With Citation

Multiple Paragraphs

Article Quotation

Styling Blockquotes

Classic Style

Modern Card Style

Colored Border Style

Large Quote Style

Attribution Best Practices

Using the cite Element

With Link to Source

With Publication Details

Common Patterns

Pull Quote

Testimonial

Accessibility

Screen Reader Behavior

Provide Attribution

Don’t Misuse for Indentation

Short Quotes vs Block Quotes

Use blockquote for Extended Quotes

SEO Considerations

cite Attribute for Sources

Unique Content

Browser Support

Related Elements

Specifications

The `<blockquote>` Element