<cite>

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 😆