Markup CityISSUE #11 of 39

quotations · blockquote · cite · q

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysQuotation elements mark cited text: <blockquote> for blocks, <q> for inline, <cite> for the source title.

Use <blockquote> for a longer quoted passage (browsers indent it), <q> for a short inline quote (browsers add quotation marks), and <cite> to name the work being referenced.

These carry meaning, so search engines and assistive tech understand the text is quoted rather than your own. Add a cite attribute with a URL to point at the source.

Power-ups you unlock

<blockquote> = block-level quote (indented)
<q> = inline quote (auto quotation marks)
<cite> = title of the referenced work
cite="url" attribute points at the source

The Unclosed Tag attacks — common mistakes

Typing manual " quotes inside <q> — the browser adds its own
Using <blockquote> just to indent (that is a CSS margin job)
Using <cite> for a person’s name — it is for a work’s title

Boss battleQuote a sentence with <blockquote cite="...">, then reference its source title inline with <cite>.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body>
  <blockquote cite="https://example.com">
    The web does not just connect machines, it connects people.
  </blockquote>
  <p>As <cite>Weaving the Web</cite> put it, the goal was <q>universal access</q>.</p>
</body></html>

▶ Open the interactive comic issue

‹ Bold · Italic · Mark · The Formatters Comments · Notes The Browser Ignores ›