Blockquote

Learn how to properly structure long quotations in HTML using the <blockquote> element, including attribution and source linking.

What it is

The <blockquote> element represents a section of content that is quoted from another source. Unlike inline quotes (<q>), blockquotes are designed for longer passages that typically span multiple lines or paragraphs. Browsers usually indent blockquotes by default, but this styling should be controlled via CSS rather than relying on browser defaults. The element supports the cite attribute, which specifies the URL of the original source, and can contain other flow content like paragraphs or lists.

Why it matters

• Semantic clarity: It tells search engines and assistive technologies that the enclosed text is a quotation, not original content.
• Accessibility: Screen readers announce blockquotes distinctly, helping users understand context shifts.
• Styling consistency: Provides a clear hook for CSS to style quotes uniformly across a site.
• Citation integrity: Proper use of cite and attribution ensures ethical content usage and traceability.

Syntax or steps

1. Wrap the quoted text inside <blockquote> tags.
2. Add the cite attribute with the full URL of the source document (note: this does not display visually).
3. Include human-readable attribution, often using the <footer> element within the blockquote or immediately after it.
4. Use <p> tags inside the blockquote if there are multiple paragraphs.

Example

<blockquote cite="https://example.com/article-title">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <footer>— <cite>Unknown Author</cite>, <a href="https://example.com/source">Source Title</a></footer>
</blockquote>

Breakdown:

• <blockquote cite="...">: Defines the quote and links to the source metadata.
• <p>: Contains the actual quoted text.
• <footer>: Groups the attribution information semantically.
• <cite>: Marks up the title of the work being cited (not the author's name).
• <a>: Provides a clickable link to the source for users.

Common mistakes

• Using <blockquote> for indentation only: Do not use it to create visual margins without semantic intent. Use CSS margin instead.
• Confusing cite attribute with <cite> element: The attribute holds a URL; the element marks up titles of works. They serve different purposes.
• Omitting attribution: A blockquote without visible credit can appear as plagiarism. Always include who said what and where.
• Nesting incorrectly: Avoid placing block-level elements like <div> directly inside <blockquote> unless necessary; prefer <p> or <footer>.

When to use it

Use <blockquote> when the quote stands alone as a distinct unit of content. Use <q> when the quote flows naturally within a paragraph.

Practice

Guided Exercise: Create a blockquote citing a famous speech. Include the cite attribute pointing to a real URL, wrap the text in a paragraph, and add a footer with the speaker's name and the speech title.

Challenge: Style your blockquote using CSS so that it has a left border, light gray background, and italicized text, while ensuring the cite attribute remains hidden from view but accessible to machines.

Quick check

Question: Does the cite attribute on a <blockquote> render visibly on the webpage?

Answer: No. The cite attribute provides machine-readable metadata about the source URL. To show citation details to users, you must manually add them using elements like <footer>, <cite>, or <a>.

Summary

The <blockquote> element is essential for semantically marking up long quotations, improving both accessibility and SEO. Always pair it with proper attribution and distinguish between the cite attribute for URLs and the <cite> element for work titles.