Semantic blockquotes in HTML5

If you’re like me you’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. All in all I think this structure is a great improvement on something that’s always been bugging me about quotes in HTML.