The <blockquote> element
The <blockquote> tag marks a section that is quoted from another source, such as a passage from a book, article or speech. Browsers indent it by default. Its optional cite attribute holds the URL of the source, and the visible attribution belongs outside the quote, for example in a <figcaption>.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, palpable content |
| Content model | Flow content (paragraphs, lists and other block content) |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts flow content |
| DOM interface | HTMLQuoteElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| cite | A URL pointing to the source of the quotation. Browsers don’t display it; it’s machine-readable metadata for scripts and search engines. |
Common examples
A quote with its source
The cite attribute stores the source URL for browsers and tools; a visible line credits the author for readers.
A quote with a caption using figure
Wrapping the quote in a <figure> ties the author line to the quote.
A customer testimonial
Reviews and testimonials are quotations from real people, so blockquote is the right fit.
Styling a blockquote
Browsers indent blockquotes by default; a left border and italic text make them look like a quote.
<blockquote> vs a pull quote
A <blockquote> quotes another source: a person, a book, a website. A pull quote repeats a line from your own article in large type to catch the eye, so it isn’t really a quotation from elsewhere.
Because a pull quote repeats text already on the page, mark it up as an <aside> (and consider hiding it from screen readers with aria-hidden="true", so the sentence isn’t read twice). Keep <blockquote> for words that come from someone else.
| <blockquote> | Pull quote | |
|---|---|---|
| Quotes | Another source | Your own text |
| Element | <blockquote> | <aside> |
| Read by screen readers | Yes | Often hidden (duplicate) |
Common mistakes to avoid
- Using blockquote just to indent text. Use CSS
marginorpaddingfor indentation; blockquote means “this is a quotation”. - Putting the author inside the blockquote. The attribution isn’t part of what was said; place it after the quote or in a
<figcaption>. - Adding quote marks by hand. Long block quotes don’t need them; if you want decorative marks, add them with CSS
::before. - Bare text inside the blockquote. Wrap the quoted text in <p> tags, especially when it has more than one paragraph.
Accessibility & SEO tips
- Credit quotes with a real name and a link to the source when possible — it builds trust with readers and shows search engines your content is well sourced.
- Don’t quote large parts of other websites: duplicated content adds nothing for search engines. Quote the key sentence and add your own commentary.
- Keep quotes in normal-sized, readable text; very large italic text is harder to read for people with dyslexia.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.