The definitions of the blockquote and cite elements in the HTML specification have recently been updated. This article explains what the changes mean for developers.
Russian translation: Сite и blockquote: перезагрузка
blockquote definition updated
The
blockquoteelement represents content that is quoted from another source, optionally with a citation which must be within afooterorciteelement, and optionally with in-line changes such as annotations and abbreviations.
Content inside ablockquoteother than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in theciteattribute. [emphasis mine]
– 4.4.4 the Blockquote element , Faulkner et al. 2016
Note the added emphasis indicated via an inline note using square brackets “[emphasis mine]”
What the changes to blockquote mean for developers
Previously in HTML5 it is was not conforming to include citations within blockquote elements. Now it is, as long as the citation content is within a cite or footer element. Citations inside blockquote elements are a common markup pattern (data indicates approximately 60% of blockquote elements include citations), the change to the HTML spec acknowledges this and provides semantic mechanisms to differentiate quoted content from citations.
Example of footer and cite used inside a blockquote:
<blockquote>
<p>As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly
– so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc,
citations almost always appear as part of the quotation – it’s highly conventional.</p>
<footer>
— <cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
</footer>
</blockquote>
The above example is indicative of what authors are doing anyway, so rather than maintain a theoretical purity which serves no one, the definition has been modified to solve a real problem using existing HTML features, rather than re-inventing the wheel.
An edge case
One of the arguments against allowing use of cite and footer in blockquote
to identify citation content is that the quoted content itself may
contain these elements. The simple reason for dismissing this argument
is that the vast majority of instances of quotations in blockquote elements this will not be the case. Denying the utility of cite and footer for an edge case is another example of theoretical purity that serves minimal practical purpose.
If the case does arise for you, one method the HTML speccurrently suggests is you comment out the elements from the source (This is still an open issue and advice may change):
(added 20/11/13) In response to feedback the suggestion in the HTML spec is to use a class attribute (a defined extensibility mechanism) on the cite element to identify it as an inclusion from the quoted source:
<blockquote>
<p>My favorite book is <cite class="from-quote">At Swim-Two-Birds</cite></p>
<footer>- <cite>Mike[tm]Smith</cite></footer>
</blockquote>
cite definition updated
The
citeelement represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, which may be in an abbreviated form as per the conventions used for the addition of citation metadata. [emphasis mine]
– 4.51 the Cite element , Berjon et al. 2013
What the changes to cite mean for developers
Previously in HTML5 it is was not conforming to cite an author by name or include other reference information for a creative work in a cite element, the use of cite was reserved (theoretically) to identify the title of a creative work. This was an attempt to rip up a cow path, that authors had created over the last 14 years of the cite elements existence.
Authors railed against the change in definition:
Join me in a campaign of civil disobedience against the unnecessarily restrictive, backwards-incompatible change to the
citeelement. Start using HTML5 but start using it sensibly. Let’s ensure that bad advice remains fictitious.
They also provided use cases and real world examples of citation usage. As a result of research, data analysis and discussion, authors can now, again, use the cite element to identify a wider range of references to a creative work; the title of the work or the name of the author (person, people or organization) or an URL reference
. What we lose in theoretical purity we gain in utility:
part of the reason why <cite> can now be used with an URL (not to mention @bing‘s identical use. http://t.co/h3qp3ujfzX
— Steve Faulkner (@stevefaulkner) October 22, 2013
What do you think?
Please read the definitions in HTML 5.1, your feedback as always is welcome!
Big up! to Doctor Oli whose research helped mold the changes made to the cite and blockquote elements. And to Doctor Bruce for insisting that it his right to cite his mum.