Summary

Identifying quoted text and their sources allows assistive technology users to distinguish prose that is cited from another source.

Techniques

Examples

Example 1 — A simple blockquote

In this example, the quote is not followed by a citation.

<p>She could just make out the
    spell ingredients on the faded
    parchment:</p>
<blockquote>
   <ul>
      <li>1 eye of newt</li>
      <li>4 toe of frog</li>
      …
   </ul>
</blockquote>
<p>Checking the spell pantry …</p>
Example 2 — Unstructured quote and citation

In this example, the citation follows the quote in a separate paragraph.

<blockquote>
   Towards thee I roll, thou all-destroying
   but unconquering whale; to the last I
   grapple with thee; from hell's heart I
   stab at thee; for hate's sake I spit
   my last breath at thee.
</blockquote>
<p>Ahab, <cite>Moby Dick</cite></p>
Example 3 — Grouped quote and citation

In this example, a figure tag is used to associate the quote with its caption, which is expressed in the figcaption tag.

<figure>
   <blockquote>
      <p>This last bill was really frightful,
          being a higher number than had been
          known to have been buried in one week
          since the preceding visitation of
          1656.</p>
   </blockquote>
   <figcaption>
      Daniel Defoe,
      <cite>A Journal of the Plague Year</cite>,
      London, 1722.
   </figcaption>
</figure>
Example 4 — A blockquote with a link to its source

In this example, a link to the official source of the quote is provided in the cite attribute.

<blockquote
    cite="https://www.ontario.ca/laws/statute/90f31#BK80">
   <p>49.5 (1) The authority to collect personal 
      information under section 49.4 is subject 
      to the following restrictions:</p>
</blockquote>
Example 5 — Basic inline quote

In this example, the quote is not separated from the text, so the inline q element is used.

<p>As Caesar is famed to have said:
   <q>Veni, Vidi, Vici</q> —
   I came, I saw, I conquered. … </p>

Frequently Asked Questions

Can I put the citation in the blockquote tag?

The HTML specification makes this illegal:

Attribution for the quotation, if any, must be placed outside the blockquote element.

The citation is separate from the quote itself. You can use a figure tag to associate a blockquote, as in example 3 with its citation but this is not strictly necessary.

Do I have to use a figure tag when there is a citation?

No. The choice whether to use the extra figure tag markup is at author discretion. It may be useful to group quotes and citations for internal workflow purposes, for example. The choice to use a figure does not significantly change the experience for assistive technology users.

Why do some sites say blockquote can have a footer for the citation?

Technically, it is valid for a blockquote to contain a footer, but the meaning of a footer element in a blockquote is unclear. According to the HTML specification, a footer applies to its nearest sectioning or body element, so a footer in a blockquote does not describe that element.

More specifically to this question, though, there were two different maintainers of HTML for a while. One group made the practice of using a footer for the citation legal while the other did not. The version of HTML that made it legal is now defunct.

Can I cite a speaker or author name?

The HTML specification also says this illegal:

The cite element represents the title of a work … A person's name is not the title of a work … and the element must therefore not be used to mark up people's names.
Does the cite attribute do anything?

Not for end users at this time, no. Reading systems will not make the URL in the attribute available to follow.

If you need the attribute other reasons (e.g., internal referencing of where a quote came from), or have a script to process the value, you can include it on both the blockquote and q tags.

Explanation

HTML includes two tags for identifying quotes:

blockquote

The blockquote element is for quotes that are offset from the main text. When rendered visually, the quote is distinguished by a larger indented on the left than the surrounding paragraphs. Quote characters are not added to the content inside the element.

q

The q element is for identifying quotes that are incorporated within another paragraph of text. When rendered visually, quote characters are automatically added, where the characters used change based on the language of the text and whether the quote is nested in another quote.

When blockquote and q tags are used to identify text quoted from another source, users of assistive technologies have access to this important information. When the correct semantic elements are not used, users may not always be aware that a quote is being read. Works of fiction, for example, sometimes intersperse fictional quotes without clearly indicating in the text that what follows is a quote.

Quote tags, specifically the inline q tags, are not used to tag regular character dialog in works of fiction. They are intended for quoting text from other sources, both real and fictional.

The primary point of confusion with quoting other sources is not in tagging the quoted text, but in how to represent the citation. Some authors want to include the citation within the blockquote, but according to the HTML specification this is invalid. Some authors also want to cite the author of a quote instead of the work it comes from, especially if there is no specific source (e.g., the phrase is a saying generally attributed to the person). This is also stated to be invalid by the HTML specification.

The problem with the HTML specification rules is that they are unenforceable by validators. Unless you manually spot a violation, a publication that does not follow these practices will not be flagged. Whether these violations have any impact on users of assistive technologies is also debatable, and for a while the W3C HTML5 specification (now defunct) allowed more flexibility in their application.

Regardless, it is always best to follow accepted markup practices. Although the rules have little impact today, the separation of quotes from citations, and works from authors, could have benefits in the future.

Related Links