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
cite elements. A summary:
blockquoteelement should contain the contents of the quotation, not metadata about the quotation.
citeelement should only be used for the titles of works, not individuals. Adding a link to
citeelements is acceptable but not necessary.
citeattribute of the
blockquoteelement should contain a copy of any link associated with the actual
citeelement. It is nice to have, not a requirement.
- HTML5 Doctor formerly recommended using the
footerelement within the
blockquoteelement 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. Using this approach and hoping the HTML5 specification changes someday seems inadvisable to me.
- There is some talk about using
figcaptionelements to get around the restrictions on including metadata within
figure, I wonder? The specification states that the contents of the
figureelement 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
articleelement 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.
articleelements are nested, the inner
articleelements 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
articleelements nested within the
articleelement for the blog entry.
And here is part of the HTML5 specification for the
footerelement 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).
Update: after publication I came across this post by Tim Murtaugh at A List Apart advocating the use of
figcaption in place of
footer. It is worth another look!