htmlcss

Blockquote — Fundamental Concept Documentation → HTML & CSS Wiki

technical and didactic documentation of the Blockquote concept.

Concept Name

Blockquote

Concept Classification

Concept Definition

The Blockquote concept defines a semantic container used to represe

a block of content that is quoted, referenced, or spoken by an external voice.

A blockquote explicitly tells the reader and the system: This text is not the main narrative.

Concept Identity

Blockquote is:

Blockquote is NOT:

Why Blockquote Exists

The blockquote element exists to solve these problems:

Historical Context

Blockquote originates from early HTML specifications as a way to preserve the meaning of quoted passages in digital documents.

Where Blockquote Is Used

Blockquote vs Paragraph

A paragraph (<p>) is used for original explanatory text. A blockquote is used for cited or external text.

Core Semantic Rule

If the content is NOT written by the main narrator, it SHOULD be inside a blockquote.

Fundamental Syntax

The most basic form:

Code

<blockquote>
  Quoted content.
</blockquote>

Rendered Result

Quoted content.

Paragraph Usage Inside Blockquote

Best practice requires

inside

.

Code

<blockquote>
  <p>Quoted paragraph.</p>
</blockquote>

Rendered Result

Quoted paragraph.

Why Paragraphs Matter

Paragraph tags:

  • Improve structure
  • Prevent rendering bugs
  • Increase accessibility
  • Allow multi-paragraph quotes

Multi-Paragraph Blockquote

Blockquotes may contain multiple paragraphs.

Code

<blockquote>
  <p>First quoted paragraph.</p>
  <p>Second quoted paragraph.</p>
</blockquote>

Rendered Result

First quoted paragraph.

Second quoted paragraph.

The cite Attribute

The cite attribute defines the SOURCE URL.

Code

<blockquote cite="https://example.com/source">
  <p>This quote has a defined source.</p>
</blockquote>

Rendered Result

This quote has a defined source.

Semantic Importance of cite

Even when invisible:

  • Search engines read it
  • Screen readers use it
  • Validators recognize it

Visible Citation with <cite>

The tag displays the source name.

Code

<blockquote cite="https://example.com/article">
  <p><cite>"Official Research Article"</cite></p>
</blockquote>

Rendered Result

"Official Research Article"

Attribution Outside Blockquote

Recommended layout.

Code

<blockquote>
  <p>"We did not anticipate this outcome."</p>
</blockquote>
<p>— Lead Analyst</p>

Rendered Result

"We did not anticipate this outcome."

— Lead Analyst

Attribution Inside Blockquote

Allowed, but less common.

Code

<blockquote>
  <p>"Failure was inevitable."</p>
  <p>— Internal Memo</p>
</blockquote>

Rendered Result

"Failure was inevitable."

— Internal Memo

Formatting Inside Blockquote

Inline formatting is valid.

Code

<blockquote>
  <p><em>"This area is unstable."</em></p>
  <p><strong>"Proceed with caution."</strong></p>
</blockquote>

Rendered Result

"This area is unstable."

"Proceed with caution."

Blockquote for Logs

Extremely common in documentation.

Code

<blockquote>
  <p><strong>Log Entry 12</strong></p>
  <p>"Temperature dropped suddenly."</p>
  <p>"Audio distortion recorded."</p>
</blockquote>

Rendered Result

Log Entry 12

"Temperature dropped suddenly."

"Audio distortion recorded."

Blockquote for Transcripts

Used for conversations.

Code

<blockquote>
  <p>Speaker A: "Do you hear that?"</p>
  <p>Speaker B: "Yes."</p>
</blockquote>

Rendered Result

Speaker A: "Do you hear that?"

Speaker B: "Yes."

Narrative Immersion

Blockquotes can represent memories or visions.

Code

<blockquote>
  <p>"The lights flickered."</p>
  <p>"Then silence."</p>
</blockquote>

Rendered Result

"The lights flickered."

"Then silence."

Accessibility Considerations

Screen readers announce blockquotes differently, helping users understand context.

Common Anti-Patterns

Incorrect usage example:

Code

<blockquote>
  This is normal explanatory text.
</blockquote>

Why This Is Wrong

  • No quotation
  • No external voice
  • No source
  • Semantic misuse

Blockquote vs Styling

Never use blockquote to:

  • Indent text
  • Make text look important
  • Replace headings

Best Practice Checklist

Before using blockquote, ask:

  • Is this quoted?
  • Is this external?
  • Is this a log or document?

Concept Summary

Blockquote is a:

  • Meaning carrier
  • Structural boundary
  • Semantic indicator

Final Reminder

If the text speaks with another voice, it belongs in a blockquote.

If it is your own explanation, it does not.

End of Concept

This document defines the Blockquote concept in full.

Footnote: This page is about blockquote basic concepts, click on the following hyperlink to acess blockquote page: Blockquote