Semantic blockquotes and citations in HTML

Quotation, n: The act of repeating erroneously the words of another.
Ambrose Bierce, The Unabridged Devil's Dictionary

You may know about the blockquote HTML tag, which signals that its content are quoted from another source.

<blockquote>
  Quotation, n: The act of repeating erroneously
  the words of another.
</blockquote>

Quotes should ideally also include the aforementioned source, so readers know where the quote comes from, and/or who said it. Intuition could lead you to put this information inside the blockquote, alongside the quote itself:

<blockquote>
  Quotation, n: The act of repeating erroneously
  the words of another.

  – Ambrose Bierce, The Unabridged Devil's Dictionary
</blockquote>

However, intuition would be wrong in this case. The documentation for the blockquote HTML tag states that attribution for the quotation, if any, must be placed outside the blockquote element.

However, if we put it outside, how can we ensure a semantic link between the quote and the source? This may not be important to many readers, but it can make a difference for those consuming content via a screen reader. Let's see how we can do this.

The figure and figcaption elements

Semantic HTML is a very rich markup language, with a variety of elements that are typically overlooked. The <figure> and <figcaption> elements are among these, but they are incredibly useful.

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
MDN

These elements are often used to more properly caption images, as you can see in the picture below.

An old abandoned pier, seen from the shore, and stretching out into the sea. At its end there are lots of birds. Waters are calm, and the sky colours hints that the picture was taken at dusk.
An old abandoned pier in Punta Arenas, Chile

The img element should still have a proper alt text for visually impaired people, but the caption still has its place giving information to all users, regardless of their accessibility needs. Just as figures are almost always captioned in text books, so they should be captioned in the web.

I'm intentionally not including the example code in this article, as we'll be focusing on quotes, but you are encouraged to inspect the markup of this picture, using your browser's developer tools. Make sure to also inspect the accessibility properties of various elements.

Back to quotes

So, how does this all fit into the topic of quotes? Well, our purpose was to provide information about the source of the quote. All we need to do is to wrap the quote inside a <figure> element. The author and source information can go in the <figcaption>.

<figure>
  <blockquote>
    Quotation, n: The act of repeating erroneously
    the words of another.
  </blockquote>
  <figcaption>
    Ambrose Bierce, The Unabridged Devil's Dictionary
  </figcaption>
</figure>

One more thing: the cite element

You can take this a step further, and semantically mark within the caption the name of the source. For this, you can use the <cite> element[^cite-attr].

[^cite-attr]: You could also use the cite attribute on the <blockquote> element, but I find it unuseful, as the link information it contains is not accessible to the reader.

<figure>
  <blockquote>
    Quotation, n: The act of repeating erroneously
    the words of another.
  </blockquote>
  <figcaption>
    Ambrose Bierce, <cite>The Unabridged Devil's Dictionary</cite>
  </figcaption>
</figure>

And lastly, you can add the source URL as a link inside the <cite> element, as shown below.

The final result

<figure>
  <blockquote>
    Quotation, n: The act of repeating erroneously
    the words of another.
  </blockquote>
  <figcaption>
    Ambrose Bierce,
    <cite>
      <a href="https://www.goodreads.com/book/show/49256.The_Unabridged_Devil_s_Dictionary">
        The Unabridged Devil's Dictionary
      </a>
    </cite>
  </figcaption>
</figure>

This is the code for the quote that you see at the beginning of this article.