HTML Quotations: blockquote, q and cite

HTML has elements built for quotes. Using them is better than using quote marks alone.

Short quotations with q

Use q for a short quote inside a sentence. Browsers add the quote marks for you.

index.html

HTML

<p>The author says, <q>Every reader starts as a stranger.</q></p>

Long quotations with blockquote

Use blockquote for a longer quote that stands on its own. Browsers indent it.

index.html

HTML

<blockquote cite="https://example.com/interview">
  <p>A good bookshop is a place where you find what you did not know you wanted.</p>
</blockquote>
<p>Interview with a bookseller</p>

The optional cite attribute holds the web address of the source. It is not shown on the page, so mention the source in text as well.

Naming the source

The cite element names the title of a work.

index.html

HTML

<p>I just finished <cite>The Slow Garden</cite>.</p>

Abbreviations

abbr marks an abbreviation. With a title it explains it.

index.html

HTML

<p>Our <abbr title="Frequently Asked Questions">FAQ</abbr> page has answers.</p>

warning

Using blockquote only to indent

blockquote means “this is quoted from somewhere else”. Do not use it to push ordinary text to the right. Use CSS for indentation.