As I started building the HTML templates for ALA v5, I tried to be as thoughtful as I could about the patterns I chose, especially for markup that was going to become part of the content of the magazine. Something I thought important to nail down was a useful and meaningful pattern for marking up blockquotes.

In the previous ALA, we used a long-standing pattern that’s been a convention since early in the the XHTML days:

<blockquote>
     <p>It is the unofficial force—the Baker Street irregulars.</p>
     <p>— <cite>Sherlock Holmes, Sign of Four</cite></p>
</blockquote>

Since we’re all HTML5 all the time these days, there are a couple problems with this:

  1. We were using the cite tag as a style hook to distinguish the quote from the attribution, but this no longer holds up as the specification for cite now specifies that people are not legitimate subjects for a citation — only “works” can be cited (books, articles, etc).
  2. That having been said, the citation doesn’t belong inside the blockquote anyway; according to the specification, the only content that can live inside a blockquote is the text being quoted.

I’d also like to get rid of the emdash — it’s pure ornamentation, and I’d rather it not be in my content.

Ok, no problem. Here’s what we could do instead:

<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
<p class="quote-citation">Sherlock Holmes, <cite>Sign of Four</cite></p>

This is valid HTML5, and the quote-citation class gives me a hook to insert an emdash (or whatever we like) via CSS:

p.quote-citation::before {
     content: "— ";
}

But: We have a semantic problem. There’s nothing meaningful, other than proximity, to tell us (or machines) that the p tag that follows the blockquote should be considered part of the same content (the class isn’t sufficient, according to the spec, and without the quote, the citation becomes a non-sequitur). So, we went looking for a semantic element to wrap this pattern in, and for a few reasons, we arrived at figure:

<figure class="quote">
     <blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
     <figcaption>Sherlock Holmes, <cite>Sign of Four</cite></figcaption>
</figure>

Not only does the spec for figure perfectly align with our needs, it even comes with the convenient figcaption element; a perfect container for our citation. I’ve given the figure a class because there are other kinds of figures — images, tables, etc etc. There are other details from the spec that we could have adopted (such as the optional cite attribute for the blockquote), but I wanted to keeps things simple for the folks marking up our articles.

(You can see part of the conversation we had about all this in this gist; it’s often smart — and fun — to take an idea to its fullest extreme before reigning yourself in.)

So, here they are, the official ALA blockquote patterns. A lot of thought for what might be a small detail, but in thinking about these things now we’re doing our best to ensure that our content is future-friendly, and not just our templates.