Blockquote problems and solutions

Currently the HTML specification for <blockquote> reads:

The blockquote element represents a section that is quoted from another source.

Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

For some uses this definition is adequate. However, the phrase “content inside a blockquote must be quoted from another source” makes it annoying or impossible to make some common changes or additions to a <blockquote>. These changes are of three main types:

  1. Typographically accepted changes to a quote, such as changing capitalisation or adding ellipses to indicate missing prose
  2. Adding quote metadata inline, such as notes and attribution
  3. Adding quote metadata on a line after the block quote, but such that it remains visually associated with the quote

I assume that 1. is actually permitted (it would be crazy not to), but a strict reading of the current spec would theoretically make any changes to the source text non-conformant. Inline annotation of a quote (2.) is pretty common (especially in academia), but is non-conformant with the current spec, and impossible to achieve in a conformant way. Following-line quote metadata that is part of (visually associated with) the block quote (3.) is possible with the current spec. However for some block quote styles (border, box-shadow etc) this is annoying to implement, requiring a <div> wrapper:

<div class="bq">
  <blockquote>[quoted text]</blockquote>
  <p><cite>[title of quote source]</cite></p>

It also requires ugly overrides if only some block quotes have this metadata:

/* desired styles */
blockquote, .bq {
  border: 1px solid #777;
  padding: .75em;
  -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
       -o-box-shadow: 0 0 6px rgba(0,0,0,0.5);
          box-shadow: 0 0 6px rgba(0,0,0,0.5);
/* overwriting desired styles */
.bq blockquote {
  border: none;
  padding: 0;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
       -o-box-shadow: none;
          box-shadow: none;

As this association is visual not semantic, it is lost if CSS is not present as the metadata <p> is not a child of <blockquote>. Were the <p> a child of <blockquote> it generally wouldn’t need extra styling, and would not require a wrapper <div>.

While it is possible to add quote attribution and notes in surrounding prose (as the spec suggests), placement of these things in or with a block quote is common in print. I have assembled some references to and visual examples of block quote practices. I suspect authors who want to do this typically add quote metadata inside the <blockquote> element, despite the spec’s admonition.

Potential solutions

Assuming that typographically accepted changes to a quote are a given, we still have inline and associated additions and changes (such as attribution and notes). There are several spec changes we can consider for <blockquote> to allow these kinds of use cases, including:

  1. A new element, say “<attribution>” or “<credit>
  2. Easing the restrictions on <blockquote> to allow quoted content and metadata about that quoted content, such as citation or notes
  3. Creating an attribute to identify non-source additions to the block quote

While a new element could be nice, no single element can cover these varying uses, for example even just inline and block attribution. Instead, I think inline changes should be allowed as prose, such as inline bracketed notes, or using current elements such as <i> and <a>. This would require rephrasing “content inside a blockquote must be quoted from another source” to permit these changes.

There would still be no way to separate the original source material from the author’s changes and additions. However, is this is a worthwhile goal? Authors edit and make changes (within the accepted practices of quoting) to improve the quotation. Having informative notes or attribution as part of the block quote makes it more valuable than the original source. Explicitly connected attribution (either inline or using <footer>) also solves the current problem with this data potentially being hidden in the cite attribute. Finally, I think it is already impossible to retain “content inside a blockquote must be quoted from another source” as-is, because real-world block quotes do have inline changes, as the aforementioned references to and visual examples of block quote practices show.

What do you think?

Contribute via the thread on WHATWG email list → “The blockquote element spec vs common quoting practices”, or ping me on Twitter ↓