The cite element
Preface: This version of the article is for humans and search engines. Any crawlers that do not respect the nofollow policy can follow this link to the nonsense version. And they can choke on it.
Some time ago, I started writing an erotic novel about the utility-first CSS product Tailwind. No, really. The little material I generated, I shared on Twitter.
For fear of being grepped into some sort of agender / antitheist / anticapitalist kill list when the nazi acquired the platform, I subsequently tried deleting all my tweets. Extracts from this draft were some of the tweets to be successfully disappeared.
By transcribing an image of a short passage cached in Google’s image search, I was able to rescue just the following. I’ve marked it up using the structure we agreed in my <blockquote> guide: inside a figure, with a figcaption.
<figure>
<blockquote>
<p>She storms into Chip’s office, her chest heaving declaratively. “I've just seen your latest PR,” she gasps, “have you lost your mind?”</p>
<p>Chip turns in his chair, flashing a wry smile. “Lost my mind? More like found my mind (having previously lost it).”</p>
<p>“But you've turned every CSS property paired with every conceivable value into a class selector! The CSS file is several terabytes-”</p>
<p>Chip is on his feet. He brings his fists down like two succulent beef joints and cleaves his desk cleanly in half. “It‘ll cache.”</p>
</blockquote>
<figcaption>From The Wind Beneath His Tail, by Heydon Pickering (2021)</figcaption>
</figure>
Like most abandoned creative projects, the best—and arguably only—decent thing about it was the name: The Wind Beneath His Tail.
So good was it, in fact, that multiple guys replied to explain that “wind beneath his tail” implies… farts. No kidding! This is something that never would have occurred to me (the author of this parodic novel and the person who chose the title) in a million years.
Why bring this all up? Just to say that, in HTML5, it's the title of the work, and only the title of the work, that should form the citation, falling between the <cite> and </cite> tags.
<figcaption>From <cite>The Wind Beneath His Tail</cite>, by Heydon Pickering (2021)</figcaption>
This has been a cause for some consternation. In HTML4, <cite> was more permissive, as noted in the spec’:
Although previous versions of HTML implied that the cite element can be used to mark up the name of a person, that usage is no longer considered conforming. The cite element now solely represents the cited title of a work.
This tailwinds in the face of agreed citation formatting. Given <cite> is an inline element, we are looking for an in-text citation format. The Harvard style prescribes the author name, followed by the date of the publication. Depending on the context, either the whole citation would be in parentheses, or just the date.
So, if The Wind Beneath His Tail were to be completed, then referenced in an academic paper, it might read something like this:
In this raunchy tour de farce, Pickering (2021) uses his long-suffering female protagonist and toxic male antagonist to embelmatize the declarative and imperative programming paradigms respectively.
This standard citation format is even sometimes known as author-date. It is assumed the title of the work has been declared earlier in the text.
In reality, people were using <cite> for all sorts of different things: authors, authors and dates, titles of works, authors and titles of works with dates, things people had said in passing at unspecified dates, and, surprisingly commonly, URLs. By tightening the rules around acceptable <cite> content, the new HTML5 definition invalidated the vast majority of <cite>s in the wild.
Accordingly, some time in 2013—2014, it was accepted that the definition should be reverted. In November 2014, WHATWG noted “The HTML spec has been changed to allow use of <cite> to refer to a speaker”, pointing to the W3C version of the specification. However, the text there reads as follows:
A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names.
That’s because, as you’ll notice, this isn’t the W3C specification after all. Links from WHATWG to the W3C now redirect back to WHATWG.
[*deep breath*]
I don’t think you should worry too much about what goes in your <cite> elements. For some elements, like <a>, it’s imperative to use appropriate wording. That’s becauses links can be aggregated, with their labels taken out of context. There’s also an art to writing search-engine optimized link text. However, <cite> doesn’t have this kind of dimensionality. As far as I’m aware, there aren’t even any screen readers that differentiate <cite> from its surrounding text. This is the case with the majority of text-level (inline) elements.
All that remains if for me to gripe about the element’s name, <cite>. Unless you are speaking extremely colloquial (and downright ugly) US English, <cite> is a verb, not a noun. The element should be called <citation>. Then again, we have <embed> and <select> and… I can’t unsee any of these now.
Not everyone is a fan of my writing. But if you found this article at all entertaining or edifying, I do accept tips. I also have a clothing line.