Tag blokquote

The blockquote tag is used to quote a block of text from another source. It typically displays the quoted content indented and styled to stand apart from the rest of the page content.

It’s semantically correct for longer quotes (not inline) and is important for accessibility and SEO.

✅ Syntax

<blockquote cite="https://example.com/article">
  This is a quote from another article or website.
</blockquote>
  • cite (optional) — URL of the source you’re quoting from

📌 Example

<blockquote cite="https://www.huxley.net/">
  Words can be like X-rays, if you use them properly – they’ll go through anything.
</blockquote>

📍 Browser Output:
Typically displayed as an indented paragraph (browsers add default styling).

💬 When to Use <blockquote>

Use it for:

  • Quoting a paragraph or multiple lines of text
  • Referencing external sources (e.g., articles, books, interviews)
  • Semantic clarity in blog posts, news, and documentation

🆚 <blockquote> vs <q>

TagUse ForOutput
<blockquote>Long/formatted quoteBlock element (indented)
<q>Short inline quoteInline, with quotation marks

Example:

<p>He said: <q>The truth will set you free.</q></p>

🎨 Styling Example (CSS)

blockquote {
  font-style: italic;
  border-left: 4px solid #ccc;
  margin: 1em;
  padding: 0.5em 1em;
  background: #f9f9f9;
}

🧠 Summary

  • <blockquote> is used for long quotations
  • Use cite to reference the source (optional, but good practice)
  • Helps with accessibility, semantics, and readability