Marking up quotations with HTML5

I have posted an update that negates much of what I have shared here. Read this first!

I am in the habit of collecting quotations inspire or otherwise interest me. When I am moved by something I read or hear I often record a key passage as a kind of mnemonic—a way of unlocking deeper thoughts and impressions of my own. Maintaining an archive of quotations allows me to have a record of when different influences entered into my life. I would love to be able to share quotations here on my blog—but I am intent on doing it the hard way, by conforming to the HTML5 specification.

Allow me to establish what kind of data we are dealing with here. Quotations generally consist of the words or content being quoted and the attribution or credit (information about the source of those words), often in a format that lists the name of the individual or organization responsible, the title of the work, and the year (or, occasionally, an actual date and time). Content and metadata, in other words—exactly what HTML is made for!

Unfortunately, the HTML5 specification is a bit of a jumbled mess when it comes to markup relevant to quotations. HTML5 Doctor provides a non-conforming yet thorough prognosis (prescription?) in an incredibly long and convoluted post about the blockquote and cite elements. A summary:

  • The blockquote element should contain the contents of the quotation, not metadata about the quotation.
  • The cite element should only be used for the titles of works, not individuals. Adding a link to cite elements is acceptable but not necessary.
  • The cite attribute of the blockquote element should contain a copy of any link associated with the actual cite element. It is nice to have, not a requirement.
  • HTML5 Doctor formerly recommended using the footer element within the blockquote element as a means of associating a quotation with information about its source. This clearly contravenes the HTML5 specification, however common similar patterns of usage may be in the wild. One of the editors of the HTML5 specification has recently clarified that this is indeed non-conforming. Update: not any more!
  • There is some talk about using figure and figcaption elements to get around the restrictions on including metadata within blockquote elements. Why figure, I wonder? The specification states that the contents of the figure element can be “moved away from the main flow of the document without affecting the document’s meaning” but this is clearly not the case with quotations. It seems we have better elements available to us. (More on that below.)

Ultimately, HTML5 Doctor falls short of offering a solution that conforms to the HTML5 specification. Instead, there is something akin to a campaign of civil disobedience in the works here. I suppose the idea is to write to the authors of the specification and complain about the gross injustice of disallowing quotation metadata within the blockquote element? Or simply defy the specification and markup quotations however we like? Both of these approaches do nothing to help designers interested in writing markup that conforms to the HTML5 specification in the here and now.

Now, I am no expert, but I believe I may have a relatively straight-forward solution to the “semantic conundrum” of adding a source to a quotation in HTML5. Here is part of the HTML5 specification for the article element:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

And here is part of the HTML5 specification for the footer element:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Sounds like a good match for quotation metadata, don’t you think? And best of all, an article element is a sectioning root!

The solution, as I see it, is to wrap quotations in a blockquote element, wrap metadata in a footer element, and wrap both in an article element. This way the contents of the footer element semantically describe the contents of the entire parent article (which is to say, the contents of the blockquote element). Moreover, nesting article elements indicates a relationship between parent and child article elements. This means that such a design pattern will work for both solitary quotations (my original focus) as well as quotations embedded within other content (e.g. blog entries, scholarly articles, or reviews, etc.).

Here is an example of the pattern I am proposing:

<article>
<blockquote cite="http://www.jim-jarmusch.net/miscellanea/author_jim_jarmusch/my_golden_rules.html">
<p>Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is nonexistent. And don’t bother concealing your thievery—celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: ‘It’s not where you take things from—it’s where you take them to.’</p>
</blockquote>
<footer>
Jim Jarmusch, <cite><a href="http://www.jim-jarmusch.net/miscellanea/author_jim_jarmusch/my_golden_rules.html">My Golden Rules</a></cite>, 2004
</footer>
</article>

This appears to accomplish the goal of visually and semantically associating metadata with quotations in a repeatable, reproducible markup pattern that can be applied in many different contexts.

In fact, this is so straight-forward that I fear I may have made some egregious error in logic. After all, the experts seem to think that the specification needs to be changed—and I am but a relative newcomer to this sort of thing. Well, the only way to find out is to post this and see what people have to say (if anything).

Next up: applying this design pattern to the WordPress “quote” post format.

Update: after publication I came across this post by Tim Murtaugh at A List Apart advocating the use of figure and figcaption in place of article and footer. It is worth another look!

Update 2: looks like the specification was changed to allow for the common usage pattern of including a citation within the blockquote element. So much for all that!

About Alexander Synaptic

I am a designer, developer, photographer, record label owner, urban explorer, and entrepreneur leading a location-independent minimalist lifestyle in Asia. With my broad range of skills and interests I am passionate about connecting disparate domains of human activity to reveal surprising symmetries and synchronicities, hence the "synaptic" aspect of my self-created identity. Read more about me here.