Text & Formatting

<blockquote>, <q>, <cite>

Long quotes, inline quotes, and citation references.

1Quoting Sources

<blockquote> is a long block-level quote (often with a cite="" attribute pointing to the source). <q> is a short inline quote (browser adds smart quotes). <cite> wraps the title of a referenced work.

Example Code

css

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

<p>She said <q>see you tomorrow</q> and left.</p>

2Put the element in context

A blockquote identifies an extended quotation, while cite can identify a work’s title. A citation attribute is not necessarily displayed as a clickable source. Include a visible source link when the reader needs to verify the quotation, and respect reuse permissions.

3Practice with a small page

Use a short permitted quotation, then add a visible source and work title. Compare the rendered attribution with the element’s cite attribute. Keep the source understandable even if default quotation indentation is removed through CSS.

Finished reading?

Mark this topic as complete to track progress.

Next Topic