The <blockquote> element marks an extended quotation from another source, set apart as its own block of content — not just a way to get an indented visual box.
Syntax
<blockquote cite="https://example.com/source">
<p>Quoted text goes here.</p>
</blockquote>Basic Example
<blockquote>
<p>CodingNow's mentors don't just teach syntax — they teach how to think like an engineer.</p>
<footer>— <cite>Priya, Full Stack Batch 2025</cite></footer>
</blockquote>Browser output: the quoted paragraph appears indented from the left (and often right) margin by default, with the attribution line right below it.
How It Works
The browser applies a default left/right margin. The <footer><cite>...</cite></footer> pattern inside the blockquote is the spec-recommended way to attribute a quote to its source, without that attribution being mistaken for part of the quote itself.
Important Attributes
| Attribute | Purpose |
|---|---|
cite | A URL pointing to the source of the quotation — not visually displayed, but useful metadata for browsers and tools |
Real-World Example
<blockquote cite="https://html.spec.whatwg.org/">
<p>The blockquote element represents a section that is quoted from another source.</p>
<footer>— <cite>WHATWG HTML Living Standard</cite></footer>
</blockquote>A testimonials section, a pull-quote in an article, or citing a specification passage all use this exact pattern.
Comparison: blockquote vs q
<blockquote> | <q> | |
|---|---|---|
| Length | Long, multi-sentence quotations | Short, inline quotations |
| Display | Block-level — starts on its own line | Inline — flows within a sentence |
| Quotation marks | None added automatically | Added automatically by the browser |
Full breakdown: Quotes (q).
Common Mistakes
- Using
<blockquote>purely to get an indented box for unrelated content — use CSSmargin/paddingon a<div>instead when there's no actual quotation - Leaving out attribution entirely, making it unclear whose words are being quoted
Best Practices
- Include attribution using the
<footer><cite>...</cite></footer>pattern inside the blockquote - Use the
citeattribute for the source URL when one exists
Accessibility Considerations
Screen readers announce <blockquote> as a distinct region, letting users know the content that follows is quoted material and not the page author's own words.
SEO Considerations
Search engines may treat blockquote content as quoted material rather than fully original site content — worth knowing when planning content strategy, though it's a nuance, not a penalty.
Browser & Modern HTML Notes
Stable across HTML versions; the <footer><cite> attribution pattern is an HTML5-era convention rather than a strict requirement.
Mini Practice
- Add a customer testimonial using
<blockquote>with proper attribution. - Quote a passage from a specification or article, including the
citeattribute.
