Quotations: blockquote, q, and cite

What they are

Three elements covering quotation, and the confusion between them is mostly about cite, which means something different from what people expect.

<blockquote cite="https://www.w3.org/TR/WCAG22/">
  <p>Content should be presentable to users in ways they can perceive.</p>
</blockquote>
<p>— <cite>Web Content Accessibility Guidelines 2.2</cite></p>

<p>The specification calls this <q>perceivable</q> content.</p>

blockquote wraps a quoted block. q marks a short quotation inside a sentence. cite names the work — a book, specification, article, or film.

The cite trap

cite names a title, not a person. Wrapping an author's name in cite is the single most common misuse of the element. If you are attributing a quote to a speaker, that name is ordinary text; the cite element belongs around the work it came from.

There is also a cite attribute, accepted on blockquote and q, holding a URL for the source. The attribute and the element are unrelated mechanisms with the same name. Typical browsers do not turn the attribute into a visible link, so treat it as machine-readable provenance and provide a visible, linked attribution separately if readers should be able to follow it.

Attribution placement

Attribution is not part of the quotation, so it does not belong inside blockquote. The specification's guidance is to put it outside, and the common pattern wraps both in a figure with the attribution in figcaption when they need to be grouped:

<figure>
  <blockquote>
    <p>Perceivable, operable, understandable, robust.</p>
  </blockquote>
  <figcaption>The four WCAG principles</figcaption>
</figure>

Native behavior

Browsers commonly indent blockquote and add nothing else. q is different: the HTML standard requires the user agent to insert quotation punctuation, so you must not type another pair immediately around or inside the element. The exact glyphs can depend on language, browser, and styling; verify the supported language and browser combinations rather than assuming one switch proves them all.

blockquote accepts flow content, which includes more than paragraphs. A p is usually the clearest wrapper for a prose quotation, but bare text is not invalid merely because it is not wrapped in a paragraph.

Accessibility

Quotation markup gives assistive technology structure it can convey, but the spoken treatment depends on the browser and assistive-technology combination. Write the surrounding sentence so the attribution remains clear when read aloud, then test a supported combination instead of depending on one assumed announcement. Generated quotation punctuation still carries its visual job.

Common failures

• cite wrapped around a person's name instead of a work's title.
• Attribution placed inside blockquote, making it part of the quote.
• Typed quotation marks inside q, doubling them.
• blockquote chosen for its indentation on text that is not a quotation.
• The cite attribute treated as a substitute for a visible source link.

Verify it

Read the passage aloud and check that the boundary between quotation and attribution is audible from the wording alone. Then inspect the quotation punctuation in each language and browser the site supports. Confirm the page does not add a second pair around the punctuation the user agent generated.