The inner world of a blockquote (HTML5/EPUB3)

The IDPF Accessibility QA Checklist makes one mention of blockquotes and that is to check that:

Headings have not been used in blockquote and figure elements

Elsewhere in the EPUB3 spec we don't find specific reference to <blockquote>, so we assume based on this statement,

The XHTML document type defined by this specification is based on W3C [HTML5], and inherits all definitions of semantics, structure and processing behaviors from the HTML5 specification unless otherwise specified.

that we should be applying the rules of HTML5. So what are the rules of HTML5 for blockquotes? Well they differ from HTML4 for a start.

Blockquotes

Where in HTML4 and EPUB2 we were required to nest <p> tags inside all <blockquote> tags, now we are free to place text directly inside the <blockquote>.

So we can do stuff like this:

<blockquote>This is a single sentence displayed as a blockquote</blockquote>

Paragraph tags

As before if we have paragraphs inside blockquotes we nest <p> tags inside the <blockquote> tags.

Cite tags

The role of <cite> tags has also changed from HTML4 to HTML5,

The cite element now solely represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). Specifically the example in HTML4 where it is used to mark up the name of a person is no longer considered conforming.

not only in meaning but also in the fact that previously cite tags would need to be nested within another block-level element, e.g. a <p> or <div> tag, but not anymore. This means that the following is legal:

<blockquote>
<p>Quotation text para 1.</p>
<p>Quotation text para 2.</p>
<cite>Book title</cite></blockquote>

And there's more (or is there?)

In addition to straightforward nesting of p and cite tags, the guidelines for HTML 5 show a whole array of approaches for arranging content inside blockquotes, which are described in brief along with warnings against actually using them in the following sections of this post!

Footers and blockquotes

A footer is described in the HTML5 spec in the following way:

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.

And what do sectioning content and sectioning root element mean in plain English (or rather HTML)? Here's your answer:

1. section content tags = article, aside, nav, section
2. sectioning root element tags =  blockquote, body, field, set, figure, td

This means that if you place a footer inside a blockquote that the footer will appear directly below the blockquote, and if you then place the cite tag inside this footer, it will appear below the blockquote too. In practical terms the difference between this and simply using <cite> is negligible. Also it must be noted that this usage is absent from more recent specs for HTML5.1, so I would proceed with caution if you are going to adopt this.

Figure grouping of blockquotes and citations

It was suggested a while ago that figure tags would be a good way to semantically group blockquotes with citations and this even entered the HTML5 specs, but again this doesn't appear in the current HTML5.1 specs and I'm quite frankly bemused on how it ever made sense to confuse figure and blockquote with one another. (Although, I'm sure others don't feel the same way!)

And ... the tweet that began the discussion that led to this post

Any help with a bunch of doubts about semantic markup for quotes?: http://t.co/wDvc7bh8gC #eprdctn
— Emiliano Molina (@cuadratin_es) May 22, 2014

Further Reading

Blockquote element (HTML5, W3C)

Cite element (HTML5.1, W3C)

HTML5 blockquotes & microdata, like two peas in a pod (Pixels&Code)

Follow @sketchytech