Exploring HTML cite attributes


I was adding missing metadata to my 2005 post archive, like a gentleman, when I found one using the <cite> HTML tag which I forgot about entirely! The Mozilla Developer Network:

The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

I used to wrap these around anchor links everywhere to denote where I had read something, or sourced an image. It adds powerful semantic meaning to links:

"Don't quote me on that."
<cite>~ <a href="//example.com">example.com</a></cite>

HTML <blockquote> tags also have a useful inline cite attribute which directly ties a source to the text you’re quoting:

<blockquote cite="//example.com">
"Don't quote me on that!"

I partly blame Markdown for me forgetting about these. When you’re used to its limited syntax and output, you naturally gravitate away from these other tools. I’m slowly moving back towards writing HTML for posts; snippets make the work of this easier anyway. I should share these at some point.

The broader and more interesting question though is why there is so much potential supporting infrastructure that isn’t being tapped. We don’t need social media and their closed networks to establish relationships between people, sites, and media with even just the most basic metadata and semantic markup. It could also help with licencing.

Author bio and support


Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.