#30DaysofHTML Day 3: < cite >
Cite your sources
<cite> is for the title of a work, which can be quoted, referenced in detail, or mentioned in passing. "Works" are books, songs, paintings, programs, TV shows, operas, social media posts, and so much more. If you're referring to something that's not your own, you need to cite it in some way.
How hard could this be? So hard. WHATWG and MDN don't agree on many points, leaving we poor developers in a world of hurt. Let's start where they do agree.
Titles of works
If it's a creative work, like the title of a book, movie, or exhibition, or the name of an opera, painting, or TV show, use <cite> to indicate it as such.
<p>Baby Yoda in <cite>The Mandalorian</cite> is the cutest thing ever!</p> 🎓 So... not exactly an academic citation, is it? We aren't linking to Disney+, or a website, or any study that has conclusively proved this statement to be true, even though we know it is true.
Where it gets hard
Let's say we want to properly quote this:
Who said it: The Client
TV show: The Mandalorian
Quote: "Bounty hunting is a complicated profession."
Website source: https://www.starwars.com/news/the-mandalorian-quotes
It's a short quote, so it could be inside of a <q> element as part of a sentence, or it could be set off as a more prominent quote in a <blockquote> element. Let's demonstrate the <blockquote> variation according to WHATWG and MDN.
WHATWG Example 1
<blockquote cite="https://www.starwars.com/news/the-mandalorian-quotes">
<p>Bounty hunting is a complicated profession.</p> </blockquote>
<p>The Client in <cite>The Mandalorian</cite></p> WHATWG maintains that the citation should not show up inside of the <blockquote>. It should be placed after it. The URL citation is placed as an attribute to <blockquote> to associate the URL with the quote.
WHATWG Example 2
<figure>
<blockquote cite="https://www.starwars.com/news/the-mandalorian-quotes">
<p>Bounty hunting is a complicated profession.</p>
</blockquote>
<figcaption>The Client in <cite>The Mandalorian</cite></figcaption>
</figure> This methodology associates the quote with who said it from where more strongly. (We'll talk about <figure> as part of the Multimedia Extravaganza toward the end of this month.)
By the way, if you feel like both of these examples make no sense, we sympathize. We are reporting their rules, not our agreement with them.
MDN Example
<blockquote>
<p>Bounty hunting is a complicated profession.</p>
<footer>The Client in <cite><a href="https://www.starwars.com/news/the-mandalorian-quotes">The Mandalorian</a></cite></footer>
</blockquote> This might be closer to what you've seen others do before. Here the character who said it and the creative work are referenced inside the <blockquote>. The URL is in a clickable link, although it could be referenced via the cite attribute if a clickable link was not desired for some reason.
What about <q>?
To keep this email short(er), we'll demonstrate <q> in the CodePen example.
Which should I use?
🤷🏼♀️ Whichever one you want; just be consistent within a website.
If there are screen reader implications for either choice, we would love to hear about this. Please comment on this post so we all can learn.
Common misconception
<cite> is not meant to contain a quote — that's what <q> (quotation) is for. MDN and WHATWG agree on this.
And remember how <q> is not for conversations? Likewise, you don't need to <cite> the person who said the thing in the conversation.
We’ve got examples of what not to do in the BAD CODE section of today’s CodePen example.
Common attributes
Cite may also be an attribute within:
<blockquote> and <q> (discussed in Day 2)
<del> and <ins> (discussed in Day 12)
The value for the cite attribute is only a URL reference. It's not flexible about its content as the <cite> element is.
When cite is used as an attribute, the reference is not visible to the web page by default. However, with the appropriate CSS-Tricks, you can write the citation to the page if you wish.
✅ The cite attribute, when paired with <blockquote> or <q>, is particularly important when used with the WHATWG methodology of quoting, where the person who said it or the work are not included within the <blockquote> or <q> element. The cite attribute would therefore connect the URL reference to the thing that was said, since no other method is possible with their rules.
But again, we are open to instruction from anyone who can explain this more clearly than we can.
<cite> and cite demo
🖥 See an example of <cite> and cite on CodePen.
Quiz: What is a creative work?
🧪 Take the quiz and find out! There’s only one question, and it should take you less than 2 minutes to complete.
Today’s challenge: Revisiting yesterday’s challenge!
Yesterday, I gave you a quote from Alice in Wonderland in your CodePen challenge. The citation part was hard since we hadn’t covered it, and most people didn’t get it quite right.
Revisit your work from yesterday in light of what you’ve learned about <cite>. How could you improve your markup now that you know more about <cite>? Edit your existing pen, or fork and make a new copy. Share in yesterday’s discussion.
Unit Challenge: <address>, <blockquote>, <q>, and <cite>
It’s the end of our unit on Who Said What From Where! That means it’s time for a meaty challenge covering all of the elements we’ve learned so far.
🧩 Try today’s CodePen Challenge. When you’ve completed it, post your answer in our discussion in Substack.
More information and examples
📚 CSS-Tricks: Quoting in HTML: Quotations, Citations, and Blockquotes