REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<blockquote>

AI & DATA SCIENCE // blockquote-tag

The <blockquote> element represents an extended quotation, typically rendered as an indented block, optionally sourced with a cite attribute.

Syntax

<blockquote cite="https://example.com/source">
  <p>Quoted text goes here.</p>
</blockquote>

Deep Dive Course

**`<blockquote>`** is for quoting a substantial passage from another source, and browsers indent it by default to visually set it apart. The optional **`cite`** attribute takes a URL pointing to the source (it's not displayed, just machine-readable metadata) — to show the source visibly to readers, add a `<footer>` or `<cite>` inside or after the blockquote. It's block-level, so it can contain multiple paragraphs, lists, or other block content, unlike the inline `<q>` element for short quotes.

1Understanding <blockquote>

`<blockquote>` is for quoting a substantial passage from another source, and browsers indent it by default to visually set it apart. The optional `cite` attribute takes a URL pointing to the source (it's not displayed, just machine-readable metadata) — to show the source visibly to readers, add a <footer> or <cite> inside or after the blockquote. It's block-level, so it can contain multiple paragraphs, lists, or other block content, unlike the inline <q> element for short quotes.

💡

Don't use <blockquote> just to indent a paragraph for visual/layout reasons — that's a job for CSS margin/padding, not a semantic quotation element.

editor.html

<blockquote cite="https://www.brainyquote.com">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— Steve Jobs</footer>
</blockquote>

localhost:3000

2Practical Example

Here is a real-world application of <blockquote> showing how it is used in production HTML.

editor.html

<!-- Multi-paragraph quotation -->
<blockquote>
  <p>First paragraph of the quoted passage.</p>
  <p>Second paragraph, still part of the same quote.</p>
</blockquote>

localhost:3000

3Best Practices

Follow these guidelines when working with <blockquote>:

1. Use <blockquote> for actual quoted passages, not generic indentation

2. Add the cite attribute with the source URL when available

3. Show the visible source/author using <footer> and <cite> inside or near the blockquote

⚠️

Tip: Don't use <blockquote> just to indent a paragraph for visual/layout reasons — that's a job for CSS margin/padding, not a semantic quotation element.

editor.html

<blockquote cite="https://www.brainyquote.com">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— Steve Jobs</footer>
</blockquote>

localhost:3000

Examples

Example 01Basic Usage

<blockquote cite="https://www.brainyquote.com">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— Steve Jobs</footer>
</blockquote>

Example 02Advanced Example

<!-- Multi-paragraph quotation -->
<blockquote>
  <p>First paragraph of the quoted passage.</p>
  <p>Second paragraph, still part of the same quote.</p>
</blockquote>

Best Practices

Use
for actual quoted passages, not generic indentation
Add the cite attribute with the source URL when available
Show the visible source/author using
and inside or near the blockquote

Interview Question

What's the difference between <blockquote> and <q>?▼

Hint: Think about block-level versus inline, and length of the quotation.

<blockquote> is a block-level element for long, standalone quotations (often multiple paragraphs), visually indented by browsers. <q> is an inline element for short quotations that flow within a sentence, and browsers automatically wrap it in quotation marks. Both support an optional cite attribute for the source URL. Choosing between them is about the length and structural role of the quote, not just styling preference.

Exercises

EasyPractice using <blockquote> in a real scenario.

View Solution

<blockquote cite="https://www.brainyquote.com">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— Steve Jobs</footer>
</blockquote>

Frequently Asked Questions

What's the difference between <blockquote> and <q>?▼

is a block-level element for long, standalone quotations (often multiple paragraphs), visually indented by browsers. is an inline element for short quotations that flow within a sentence, and browsers automatically wrap it in quotation marks. Both support an optional cite attribute for the source URL. Choosing between them is about the length and structural role of the quote, not just styling preference.

Related Functions

q-tagcite-tag