Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute

by .

NOTE: (6/11/2013) The definitions of cite and blockquote in HTML have changed. For the latest advice on using these elements refer to cite and blockquote – reloaded

Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accommodated in the elements <blockquote> and <q>, with their optional cite attribute. In addition, there’s the <cite> element, which over the last nine years went from ‘semantic orphan element made good’ to one of the more contentious elements in HTML5. Let’s power up the endoscope and examine the scarring, starting with <blockquote>.

Quoting with <blockquote>

We’ve become pretty familiar with <blockquote> here, as most of our articles feature excerpts from the HTML5 specification. Look, here’s one right now:
The blockquote element represents a section that is quoted from another source.
Easy peasy, right? Nothing has really changed. Remember that as <blockquote> is a ‘block-level element’ (flow content) we can put most anything in it, including headers, images and tables, in addition to the usual paragraphs of text. There are a couple of slight differences in HTML5 though. <blockquote> is a sectioning root, meaning that any <h1>-<h6> elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing <p> tags is now completely kosher. Here are some simple <blockquote> examples (apologies for the fake content):
<blockquote>This is a short block quote — look Ma, no paragraph tags!</blockquote>
This is a short block quote — look Ma, no paragraph tags!
<blockquote><p>This is a longer block quote.</p>
  <p>It uses paragraph elements.</p>
</blockquote>
This is a longer block quote. It uses paragraph elements.
<blockquote><h1>OMG a heading!</h1>
  <ul><li>Block quotes can contain more than just paragraphs…</li></ul>
</blockquote>

OMG a heading!

  • Block quotes can contain more than just paragraphs…
Historically, adding the source of a <blockquote> was a semantic conundrum. If you add it as content of the <blockquote>, then semantically it would become part of the quote, right? <blockquote> (and <q>) have a cite attribute for the URL of the quote’s source, to provide context. That’s hidden data, however, and despite the potential for exposing the cite attribute via CSS and/or JS, that’s not as useful as a visible link.
  It seems our long-running convention at HTML5 Doctor of using <footer> for attribution inside a <blockquote> is actually non-conforming. However the phrase in the spec that prevents it also prevents other common block quoting patterns, so the spec will probably change. Read my article <blockquote> problems and solutions, and submit feedback via the WHATWG email list, the comments here or to be via Twitter (@boblet) — your feedback will influence how the spec changes! I’ll update this article after the change, but until then be aware <footer> for attribution in a <blockquote> isn’t strictly valid, and may not be in the future either. The spec currently recommends including attribution in content surrounding the <blockquote>.

Hixie has given his feedback on my email, and it seems like our <footer> citations are still invalid. The official recommendation is to put the blockquote in a figure and add attribution in <figcaption>. Read the whole thread as there are some interesting comments. I’ll wait for the dust to settle a little yet…

HTML5 comes to our rescue with the <footer> element, allowing us to add semantically separate information about the quote. For example:
<blockquote>
  <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
  <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>
You know the golden rule, don’t you boy? Those who have the gold make the rules.
Because of this semantically sound way to show the quote’s source, <