Extra Ideas About Blockquotes than are Strictly Required – A Listing Aside

Article Continues Under

As I began constructing the HTML templates for ALA v5, I attempted to be as considerate as I might in regards to the patterns I selected, particularly for markup that was going to grow to be a part of the content material of the journal. One thing I believed necessary to nail down was a helpful and significant sample for marking up blockquotes.

Within the earlier ALA, we used a long-standing sample that’s been a conference since early within the the XHTML days:

<blockquote>
     <p>It's the unofficial pressure—the Baker Road irregulars.</p>
     <p>— <cite>Sherlock Holmes, Signal of 4</cite></p>
</blockquote>

Since we’re all HTML5 on a regular basis nowadays, there are a pair issues with this:

1. We have been utilizing the cite tag as a mode hook to differentiate the quote from the attribution, however this not holds up because the specification for cite now specifies that persons are not professional topics for a quotation — solely “works” might be cited (books, articles, and so forth).
2. That having been mentioned, the quotation doesn’t belong contained in the blockquote anyway; based on the specification, the one content material that may stay inside a blockquote is the textual content being quoted.

I’d additionally wish to do away with the emdash — it’s pure ornamentation, and I’d moderately it not be in my content material.

Okay, no downside. Right here’s what we might do as an alternative:

<blockquote>It's the unofficial pressure—the Baker Road irregulars.</blockquote>
<p class="quote-citation">Sherlock Holmes, <cite>Signal of 4</cite></p>

That is legitimate HTML5, and the quote-citation class provides me a hook to insert an emdash (or no matter we like) through CSS:

p.quote-citation::earlier than {
     content material: "— ";
}

However: We have now a semantic downside. There’s nothing significant, aside from proximity, to inform us (or machines) that the p tag that follows the blockquote needs to be thought of a part of the identical content material (the category isn’t adequate, based on the spec, and with out the quote, the quotation turns into a non-sequitur). So, we went on the lookout for a semantic ingredient to wrap this sample in, and for a couple of causes, we arrived at determine:

<determine class="quote">
     <blockquote>It's the unofficial pressure—the Baker Road irregulars.</blockquote>
     <figcaption>Sherlock Holmes, <cite>Signal of 4</cite></figcaption>
</determine>

Not solely does the spec for determine completely align with our wants, it even comes with the handy figcaption ingredient; an ideal container for our quotation. I’ve given the determine a category as a result of there are different kinds of figures — photos, tables, and so forth and so forth. There are different particulars from the spec that we might have adopted (such because the optionally available cite attribute for the blockquote), however I wished to retains issues easy for the parents marking up our articles.

(You may see a part of the dialog we had about all this on this gist; it’s typically sensible — and enjoyable — to take an thought to its fullest excessive earlier than reigning your self in.)

So, right here they’re, the official ALA blockquote patterns. Loads of thought for what could be a small element, however in serious about this stuff now we’re doing our greatest to make sure that our content material is future-friendly, and never simply our templates.