<cite>
By raae for Semantic Advent |
I've been using <cite>
wrong for years 😱
Let's start with the summary from MDN Docs
The
<cite>
HTML element is used to mark up the title of a cited creative work.
All fine and dandy, and usually exemplified by something like:
The song <cite>Jingle Bell</cite> was written by James Lord Pierpont in 1857.
However, I've never seen <cite>
used this way in any real-world setting. I've only ever seen and used it myself to reference the source of a <blockquote>
.
And to my surprise, the following passage in the HTML <blockquote>
Specs states (emphasis mine):
Attribution for the quotation, if any, must be placed outside the blockquote element.
I.e. you should not use a <cite>
within the <blockquote>
(as I have always done) because then <cite>
itself is considered part of the quote 🤦♀️
So what to do?
You can go with a <p>
+ <cite>
:
<p>The first verse of <cite>Jingle Bell</cite> by James Lord Pierpont:</p>
<blockquote>
Dashing through the snow<br />
In a one-horse open sleigh
</blockquote>
Or go all out with a <figure>
+ <figcaption>
+ <cite>
:
<figure>
<blockquote>
O'er the fields we go<br />
Laughing all the way
</blockquote>
<figcaption>The second verse of <cite>Jingle Bell</cite> by James Lord Pierpont</figcaption>
</figure>
The first one is probably the most pragmatic solution for most CMS-backed projects.
And that was not my only surprise; the HTML <cite>
Specs states (emphasis mine):
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.
As in, you should not quote a person and add the person's name inside a <cite>
.
And by the way, let's take a second to celebrate this brilliant piece of documentation; at least I laughed 😆