HTML <blockquote> Tag

Q: What is the HTML blockquote tag used for?

The blockquote element marks a section quoted from another source. It is a block-level semantic element that tells browsers and assistive technologies the content is a quotation.

Q: What does the cite attribute on blockquote do?

The cite attribute holds a URL pointing to the source of the quotation. It is not displayed on the page but helps machines identify where the quote came from.

Q: What is the difference between blockquote and q?

blockquote is for longer, block-level quotations that stand on their own. q is for short inline quotations inside a sentence.

Q: How do I show the author of a quote on the page?

Use a footer element inside blockquote with a cite element for the author or source name. The cite attribute on blockquote alone does not display visible attribution.

Q: Can I use blockquote just for indentation?

No. Use blockquote only for actual quotations. For indentation or visual layout, use CSS margins and padding instead.

Beginner

⏱️ 6 min read

📚 Updated: Jun 2026

🎯 4 Examples

Text & Semantics

HTML blockquote tag tutorial — block-level quotations and cite attribute

Overview

What You’ll Learn

By the end of this tutorial, you’ll confidently mark up block-level quotations with semantic HTML in real-world projects.

Core Syntax

Write valid <blockquote> elements for longer quoted passages.

cite Attribute

Link to source URLs for machines while keeping visible attribution separate.

Visible Attribution

Add author names with <footer> and the <cite> element.

blockquote vs q

Choose block-level quotes for long passages and inline <q> for short phrases.

CSS Styling

Style borders, spacing, and typography for polished pull quotes.

Production Tips

Apply accessibility and semantic HTML best practices for quotations.

Fundamentals

What Is the `<blockquote>` Tag?

The blockquote element (<blockquote>) represents a section that is quoted from another source. It is a block-level semantic HTML5 element that helps readers and assistive technologies recognize quoted content.

💡

Quotations only—not indentation

Use <blockquote> for actual quoted passages from another source. Do not use it merely to indent text—use CSS margins and padding for layout instead.

Browsers typically indent blockquotes with a left margin by default. Common uses include blog pull quotes, testimonials, literary excerpts, and cited passages in articles.

Foundation

📝 Syntax

Wrap quoted text between opening and closing <blockquote> tags. Put the quote inside a <p> for cleaner structure:

syntax.html

<!-- Basic blockquote syntax -->
<blockquote>
  <p>Your quoted text here.</p>
</blockquote>

Syntax Rules

Wrap longer, standalone quotations that deserve their own block.
Place quote text inside <p> elements for proper paragraph structure.
Use the cite attribute for a source URL (hidden from readers).
Add <footer> + <cite> for visible author or source attribution.

attribution-example.html

<blockquote cite="https://example.com/source">
  <p>Quoted text from that source.</p>
  <footer>&mdash; <cite>Author Name</cite></footer>
</blockquote>

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Result
Basic quote	`<blockquote><p>...</p></blockquote>`	A journey of a thousand miles begins with a single step.
Source URL	`<blockquote cite="https://...">`	URL for machines only
Visible author	`<footer>— <cite>Name</cite></footer>`	“Imagination is more important than knowledge.” — Albert Einstein
Inline quote	`<q>short phrase</q>`	practice makes perfect
Default style	`<blockquote>...</blockquote>`	Left margin indent
Styled pull quote	`class="pull-quote"` + CSS	Border, background, spacing

Comparison

⚖️ <blockquote> vs <q>

Choose the right quotation element based on length and context:

Feature	<blockquote>	<q>
Display	Block-level (own line)	Inline (inside a sentence)
Best for	Longer, multi-sentence quotes	Short phrases within text
Default styling	Left margin indent	Browser adds quotation marks
cite attribute	Yes (URL to source)	Yes (URL to source)

blockquote-vs-q.html

<!-- Block-level: longer quote -->
<blockquote><p>A journey of a thousand miles begins with a single step.</p></blockquote>

<!-- Inline: short quote inside text -->
<p>As the saying goes, <q>practice makes perfect</q>.</p>

Reference

🧰 Attributes

The <blockquote> tag has one important tag-specific attribute plus global attributes:

cite Optional

URL pointing to the quotation source. Not displayed on the page—use footer + cite element for visible attribution.

cite="https://example.com/source"

class / id Global

Hook for CSS styling. Common pattern: class="pull-quote" or class="testimonial".

<blockquote class="pull-quote">

Allowed content Flow

Paragraphs, headings, lists, and a footer for attribution. Typically one or more p elements.

<p>, <footer>, flow content

footer + cite A11y

Visible author or source name inside blockquote. The inner cite element is for names/titles, not URLs.

<footer>&mdash; <cite>Author</cite></footer>

The cite attribute on blockquote holds a URL for machines. For visible attribution, always add a footer with a cite element inside the blockquote.

Hands-On

Examples Gallery

Real-world quotation patterns with copy-ready code, live previews, and hands-on practice.

Live Preview

A styled blockquote with visible attribution:

“The only limit to our realization of tomorrow is our doubts of today.”
— Franklin D. Roosevelt

Basic Block Quotation

The simplest form: wrap quoted text in <blockquote>.

basic-blockquote.html

<blockquote>
  <p>The only limit to our realization of tomorrow is our doubts of today.</p>
</blockquote>

Try It Yourself

📚 Common Use Cases

Developers use <blockquote> for blog pull quotes, testimonials, literary excerpts, and cited passages in articles.

Famous Literary Quote

A standard block-level quotation for well-known text.

famous-quote.html

<blockquote>
  <p>&ldquo;To be, or not to be, that is the question.&rdquo;</p>
</blockquote>

Try It Yourself

Source URL with cite Attribute

Link to the original source with the cite attribute. Remember: this URL is for machines, not visible to readers.

cite-attribute.html

<blockquote cite="https://www.archives.gov/exhibits/american_originals_iv/sections/speech_transcript.html">
  <p>&ldquo;The only thing we have to fear is fear itself.&rdquo;</p>
</blockquote>

Try It Yourself

Visible Attribution with footer

Show the author or source name on the page using <footer> and the <cite> element.

attribution.html

<blockquote cite="https://en.wikiquote.org/wiki/Albert_Einstein">
  <p>&ldquo;Imagination is more important than knowledge.&rdquo;</p>
  <footer>&mdash; <cite>Albert Einstein</cite></footer>
</blockquote>

Try It Yourself

Design

Styling <blockquote> with CSS

Go beyond the default indent with borders, backgrounds, and typography:

default Left margin indent

border-left Accent bar

font-style: italic Quote emphasis

blockquote footer Attribution styling

blockquote-styles.css

/* Pull quote style */
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #2563eb;
  background: #eff6ff;
  border-radius: 0 6px 6px 0;
}

/* Quote text */
blockquote p {
  font-style: italic;
  color: #1e3a8a;
}

/* Visible attribution */
blockquote footer {
  font-size: 0.8125rem;
  color: #64748b;
}

Live styled pull quote

“The only limit to our realization of tomorrow is our doubts of today.”
— Franklin D. Roosevelt

A11y

♿ Accessibility

Semantic quotations help all users understand your content:

Use for real quotes — only mark actual quotations, not indented decoration.
Provide attribution — add a footer with author or source so readers know the origin.
Screen readers — announce blockquote as a quotation landmark.
Don’t rely on styling alone — CSS borders do not convey “quote” meaning to assistive tech.

🧠 How <blockquote> Works

Author wraps quoted text

Place the passage from another source inside blockquote.

Markup

Browser applies default styles

Typically adds left margin/indent so the quote stands apart from body text.

Rendering

Optional cite and footer

cite URL for machines; footer + cite element for visible source.

Attribution

Clear, semantic quotation

Readers and assistive technologies recognize the content as a quote from another source.

Compatibility

Universal Browser Support

The <blockquote> element is supported in all modern browsers and has been part of HTML since early versions.

✓ Baseline · Since HTML 2

Works everywhere your users are

From legacy Internet Explorer to the latest Chromium builds — the blockquote element is one of the most universally supported semantic HTML tags.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<blockquote> tag 100% supported

Bottom line: Ship quotation markup with confidence. The <blockquote> element is safe to use in every production environment today.

Wrap Up

Conclusion

The <blockquote> tag is the right choice for longer quotations in HTML5. Pair it with the cite attribute for source URLs and a footer for visible attribution.

Style it with CSS for a polished, readable presentation—and reserve the element for actual quoted passages, not layout indentation.

View Examples Gallery Try Attribution Example

Pro Tips

💡 Best Practices

✅ Do

Use blockquote for actual quoted passages
Wrap quote text in p elements for structure
Add footer + cite for visible attribution
Style with CSS borders, spacing, and typography

❌ Don’t

Use blockquote just for indentation
Expect the cite attribute to show the source on screen
Use blockquote for short inline phrases (use q)
Forget to credit the original author or source

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<blockquote>`

Bookmark these before you ship — they’ll make every quotation clear and accessible.

Core concepts

💬 01

Block-Level Quotes

<blockquote> marks longer quotations that stand apart from body text.

Foundation

✅ 02

Valid HTML5

Semantic element supported in every browser since early HTML.

Status

🔗 03

cite = Hidden URL

The cite attribute stores a source URL for machines, not readers.

Reference

📝 04

footer + cite Element

Use footer with a cite element for visible author attribution.

Pattern

📝 05

Use q for Inline

Short phrases inside sentences belong in <q>, not blockquote.

Comparison

🎨 06

Style with CSS

Borders, backgrounds, and typography—not misuse for layout indentation.

Design

❓ Frequently Asked Questions

What is the HTML blockquote tag used for?

It marks a section quoted from another source. Browsers indent it by default and assistive technologies recognize it as a quotation.

What does the cite attribute on blockquote do?

It holds a URL to the quotation source. The URL is not displayed on the page—use footer and cite for visible attribution.

What is the difference between blockquote and q?

blockquote is block-level for longer quotes. q is inline for short phrases inside a sentence.

How do I show the author of a quote on the page?

Add a footer inside the blockquote with a cite element for the author or source name.

Can I use blockquote just for indentation?

No. Use CSS margins and padding for layout. Reserve blockquote for actual quotations.

Practice Block Quotations

Add quotes with proper attribution in the Try It editor.

Try blockquote →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML blink Tag HTML body Tag

HTML <blockquote> Tag

What You’ll Learn

Core Syntax

cite Attribute

Visible Attribution

blockquote vs q

CSS Styling

Production Tips

What Is the <blockquote> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <blockquote> vs <q>

🧰 Attributes

Examples Gallery

Live Preview

Basic Block Quotation

📚 Common Use Cases

Famous Literary Quote

Source URL with cite Attribute

Visible Attribution with footer

Styling <blockquote> with CSS

♿ Accessibility

🧠 How <blockquote> Works

Author wraps quoted text

Browser applies default styles

Optional cite and footer

Clear, semantic quotation

Universal Browser Support

Works everywhere your users are

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <blockquote>

Block-Level Quotes

Valid HTML5

cite = Hidden URL

footer + cite Element

Use q for Inline

Style with CSS

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <aside> Tag

HTML <article> Tag

CSS Styling

Try Attribution Example

Practice Block Quotations

About the author

What Is the `<blockquote>` Tag?

Six truths every developer should know about `<blockquote>`