The <blockquote> Element
As defined in the HTML Living Standard, the <blockquote> element represents a section that is quoted from another source. Content within the blockquote should be a representation of that source.
"Accessibility isn't extra work. Accessibility is already here, waiting for you to notice."— SimpleAccess Manifesto
<blockquote cite="https://example.com/source">
<p>The quoted text goes here.</p>
</blockquote>
<cite>— The Author</cite>
View HTML Living Standard: The blockquote element
Usage & Best Practices
- The
citeAttribute: This attribute should contain a URL that points to the source of the quote. Note that this attribute is not visible to users; visual attribution should be provided separately. - Block-level Content: A blockquote can contain other block-level elements like headings, lists, or multiple paragraphs.
- Avoid for Indentation: Never use
<blockquote>purely for visual indentation of non-quoted text. This misleads assistive technologies.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using the <blockquote> element, you programmatically identify a section of text as a quote. Screen readers can announce the start and end of a quote, providing essential context to blind users that sighted users perceive via visual styling (like indentation).
Attribution Best Practices
While the HTML spec does not strictly define where the attribution (the source name) must live, the most common and accessible pattern is to place a <cite> or <figcaption> immediately following the blockquote.
A11y Tip: Using Figure
For the most robust semantic grouping, wrap your <blockquote> and its attribution in a <figure> element. This creates a clear programmatic relationship between the quote and its source.
<figure>
<blockquote>
<p>"The web is for everyone."</p>
</blockquote>
<figcaption>— Tim Berners-Lee</figcaption>
</figure>