Quotations (<blockquote>, <q>, <cite>) — HTML

Quotations in HTML

HTML has three dedicated elements for quoting other sources: <blockquote> for long, block-level quotes, <q> for short inline quotes, and <cite> for naming the work being quoted. Using them correctly gives quoted content real semantic meaning instead of just borrowed styling.

<blockquote> — Block Quotations

<blockquote> marks up an extended quotation that is set apart from the surrounding text — usually rendered as an indented block by browsers. It accepts an optional cite attribute containing a URL that points to the source of the quote (this is not displayed, but tools and browsers can use it).

blockquote.html

HTML

<blockquote cite="https://www.w3.org/History/1989/proposal.html">
  <p>Vague, but exciting.</p>
</blockquote>
<p>&mdash; Mike Sendall, on Tim Berners-Lee's original web proposal</p>

Vague, but exciting.
                                        (indented block, default browser styling)

cite is invisible

The cite attribute is metadata only — no browser displays it on the page. If you want a visible link to the source, add a real <a> link near the quote (often inside a <footer>, as shown further down).

<q> — Inline Quotations

<q> is for short quotations that flow inline with surrounding text. Browsers automatically wrap the content in quotation marks via CSS (content generated from the quotes property) — you should not type your own quote characters around it.

inline-quote.html

HTML

<p>As the saying goes, <q>practice makes perfect</q>, and it applies to code too.</p>

Locale-aware punctuation

Because the quote marks are generated by the browser, they automatically adapt to the page's language — English pages get "..." while some other locales get guillemets («...») or low quotes, without you writing any locale-specific markup.

<cite> — Citing a Work's Title

<cite> names the title of a creative work — a book, film, song, research paper, or article — not the person who said the quote. Browsers render its content in italics by default.

cite.html

HTML

<p><cite>The Pragmatic Programmer</cite> popularized the term "DRY" (Don't Repeat Yourself).</p>

<blockquote cite="https://example.com/mdn-html">
  <p>The HTML <q>q</q> element indicates that the enclosed text is a short inline quotation.</p>
</blockquote>
<footer>
  &mdash; <cite>MDN Web Docs</cite>
</footer>

Common mistake

<cite> is for the title of the source, not the author's name. Wrapping a person's name in <cite> (e.g. <cite>Jane Doe</cite>) misuses the element — just use plain text or <span> for the author, and reserve <cite>for the work itself.

Putting It Together

full-example.html

HTML

<article>
  <blockquote cite="https://www.gutenberg.org/ebooks/1080">
    <p>It was the best of times, it was the worst of times.</p>
  </blockquote>
  <footer>
    Opening line of <cite>A Tale of Two Cities</cite> by Charles Dickens.
  </footer>

  <p>
    Dickens later reflects that this contrast is, as he put it,
    <q>the superlative degree of comparison only</q>.
  </p>
</article>

Quick Reference

Element	Purpose	Default rendering
`<blockquote>`	Long, block-level quotation	Indented block
`<q>`	Short, inline quotation	Wrapped in automatic quote marks
`<cite>`	Title of a referenced work	Italic text

Use cite (the attribute) on <blockquote> and <q> to link to the source URL — invisible, but useful metadata.
Use <cite> (the element) for the name of the work, never for the author.
Prefer <q> over manually typed quotation marks for inline quotes — it stays consistent across locales.