I’ve been doing blockquotes like this for years:

<blockquote>
  The quote...
  <cite>The author...</cite>
</blockquote>

Well it turns out <cite> isn’t what we thought it was. It doesn’t mean the source of the quote, it means the name of the source material that the quote is from (book, article, song). So it’s not the author or the company, it’s the publication. This just isn’t the right tag to use.

There’s also another problem; the <cite> is inside the <blockquote> tag, indicating that the author attribution is part of the quote itself. This is sad semantics :(

There’s got to be a better way?

Apparently the correct way to quote is like this:

<figure>
  <blockquote>
    The quote...
  </blockquote>
  <figcaption>The author...</figcaption>
</figure>

The quote is still a <blockquote> but this time there’s no <cite> inside. The author sits beneath as a <figcaption>, with both elements inside a <figure> tag.

This method basically borrows the logic behind how <img> tags are attributed. For images the structure is:

<figure>
  <img src="image.jpg">
  <figcaption>Fig 1: Description</figcaption>
</figure>

Basically the same thing.

Though there’s no true consensus, the <figcaption> method makes sense. It re-uses a structure that’s been around for a while that already means exactly what we’re trying to express; a ‘thing’ that is attributed to another ‘thing’.

Some people like to replace <figcaption> with <footer>, which semantically means a similar thing. Some go further and put it back inside the <blockquote>… which puts us right back where we started :P

Kickstarter Coming March 2018

I'm launching a board game called Delivery Duck. You're a duck, in a truck, delivering packages. It's a strategic family game for 2 to 6 players.

Check out the board game!