Quotations and Citations

Mark up quotes with blockquote, q, and cite.

Syntax<blockquote>Long quote here.</blockquote>

HTML has elements for quoting text.

Quotation elements

  • <blockquote> — a long, block-level quotation.
  • <q> — a short, inline quotation (browsers add quotation marks).
  • <cite> — the title of a work being cited.

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • A news site uses <blockquote cite="https://..."> to quote a statement from an external source article.
  • A developer uses <q> for a short inline quote inside a product testimonial paragraph.
  • A legal page uses <cite> to reference the title of a law or published standard being cited in the text.

More examples

Block quotation from an external source

<blockquote> displays an extended quote as an indented block; cite attributes the original source URL.

Example · html
<blockquote cite="https://www.w3.org/standards/">
  <p>The Web is for everyone, and together we can make it accessible and usable by everyone.</p>
  <footer>— <cite>W3C Mission Statement</cite></footer>
</blockquote>

Inline quotation with q element

<q> wraps a short inline quotation and browsers automatically add language-appropriate quotation marks.

Example · html
<p>Tim Berners-Lee once said <q>The web is more a social creation than a technical one.</q></p>

Cite element for a referenced work

<cite> marks the title of a creative work, publication, or standard being referenced in the text.

Example · html
<p>This tutorial follows the guidelines in
  <cite>HTML: The Living Standard</cite> published by WHATWG.
</p>

Discussion

  • Be the first to comment on this lesson.
Quotations and Citations — HTML | SoundsCode