There’s a tag I try to use from time to time and, when I do, find myself frowning. That tag is cite; cite is an inline element which indicates the text within the cite tag is … well, that’s the question.

There’s some history with cite, but I’ll be talking about HTML5. The HTML5 specification defines cite as … the title of a work … [which] can be … quoted or referenced in detail … or … mentioned in passing.

That’s a stifling way to deal with the cite tag at worst — and confusing at best.

When I read that definition I thought back to the ways I’ve considered using, or have used, cite in the past and thought it didn’t fit. A quick Google search showed me that my thoughts are shared by others, but there are many ideas which have been expressed regarding cite which haven’t been implemented and which I think are very good notions.

The current definition of cite means it is suitable for scenarios such as a journal entry which states, “I am currently re-reading Storm Front from The Dresden Files by Jim Butcher. And my little sister has left for Spain — I’m so jealous!” cite can also be used in references (though only around titles) like “Butcher, Jim. (1999). Storm Front. New York, NY.”

But there’s a pretty huge gap between those two situations and it suggests that cite is equivalent to “the title of something” rather than “the source of citation”. That’s what the HTML5 spec says. But that’s a tad confusing given the literal word involved.

I don’t intend to suggest that cite should only be useful for formal scholastic citations, but I do mean to suggest that it could be more useful for both formal citations as well as for everyman’s casual citation needs. It will be a benefit if the cite element can simply be used as if it is what it sounds like it is, rather being specified in a way contrary to “common sense”.

Untitled by Rachael L. Moore

The HTML5 definition makes cite less useful in “real” citations than it certainly should be. Perhaps the specification writers have blocked from their minds the vagaries of APA, MLA, Chicago, etc. According to these well-known and established style guides, you can and people do cite authors, chapters, websites, and untitled pages on anonymous websites as well as the types of works listed in the HTML5 spec. What a content author needs to cite and the appropriate way to cite varies with what information is being presented and where that information came from. In the real world a real citation is not always a title, therefore cite should not be limited to titles.

So It’s A Homonym?

Contrast the cite tag with the cite attribute — it’s the same word and sometimes serves the same purpose, but it’s for completely different data! cite-the-element can only contain titles and cite-the-attribute can only contain valid URLs. cite-the-attribute is not a valid attribute for cite-the-element (which would be a bit dizzying). Combining the two is nevertheless useful; yet I wonder why a tag and an attribute with the same name are mutually exclusive and have apparently different purposes.

Dunno Where That Book is, Mate

Presumably if you’re using cite, you will often have other content on the page which the cite relates to. If you don’t, it’s just the title of something you happen to be writing down for some whimsical reason. Fine. Yet, the cite tag conspicuously lacks any way to perform this basic task of associating a citation with the information being cited 1. This is such an easily correctable oversight.

Examples

Below are some examples, some of which are ways to use cite that wouldn’t necessarily be valid in HTML5, but should be considered. In some sets I have contrasted my experiment(s) with other examples which (I think) would be valid in HTML5. I don’t necessarily endorse all these examples; you can think of them as a stream of consciousness. I will probably update them post-publishing as they occur to me.

Example Set 1

In Example 1a you can see how cite could theoretically be associated with content using for 2. In Example 1b I’ve attempted to render the same information in valid HTML5 (at least, so far as I understand it). I’ve also done some things with dfn and for in Example 1a which may muddy the example somewhat. But part of the idea is that for could become generic, so I wanted to test the efficacy & ease-of-use.

Example 1a

In the <cite href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element" for="cite-definition">HTML5</cite> specification <code id="cite-tag" class="tag tag-element">cite</code> tag is defined as <q id="cite-definition"><dfn for="cite-tag">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example 1b

In the <cite>HTML5</cite> specification <a href="#cite-tag-html5"><code class="tag tag-element">cite</code></a> tag is defined as <q cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element"><dfn id="cite-tag-html5" title="cite">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example Set 2

I like the cite attribute, though I have some reservations and questions about it. Is a relative URL a “valid URL” here? If so I think a fragment identifier could be used like in Example 2a and Example 2b. What about a tag URI? If I understand the spec’s admonitions and the associated draft Web addresses in HTML 5 correctly, the way HTML5 defines a “URL” includes URIs (maybe?), so it has potential because “urn:isbn:0-486-27557-4” could be used.

Example 2a

In the <cite href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element" id="cite-html5">HTML5</cite> specification <code id="cite-tag-html5" class="tag tag-element">cite</code> tag is defined as <q cite="#cite-html5"><dfn for="cite-tag-html5">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example 2b

In the <cite id="cite-html5"><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">HTML5</a></cite> specification <a href="#cite-tag-html5"><code class="tag tag-element">cite</code></a> tag is defined as <q cite="#cite-html5"><dfn id="cite-tag-html5" title="cite">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example Set 3

I find Example 3a more elegant than Example 3b, but I concede it’s a matter of personal taste. Incidentally I am generally in agreement with Eric Meyer’s suggestions about linking (though, for one thing, I see potential use cases for article and href … if it is in fact appropriate to use the article tag for excerpts/summaries that link to the full article).

Example 3a

<p id="cite-339858343">In <cite href="http://meyerweb.com/eric/html-xhtml/html5-linking.html" for="cite-339858343">HTML5: More Flexible Linking</cite>, Eric Meyer proposed adding <code class="tag tag-attribute">href</code> to the <code class="tag tag-element">cite</code> tag. I think this makes a lot of sense.</p>
<pre class="example excerpt">
	<p><cite href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</cite> is a work in progress.</p>
</pre>

Example 3b

<p>In <cite><a href="http://meyerweb.com/eric/html-xhtml/html5-linking.html">HTML5: More Flexible Linking</a></cite>, Eric Meyer proposed adding <code class="tag tag-attribute">href</code> to the <code class="tag tag-element">cite</code> tag. I think this makes a lot of sense.</p>
<pre class="example excerpt" cite="http://meyerweb.com/eric/html-xhtml/html5-linking.html">
	<p><cite href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</cite> is a work in progress.</p>
</pre>

Example Set 4

Do you really need to cite your mother? Well, probably not, but I can imagine a legitimate need for cite in scenarios where a person would be cited: spoken words not recorded, aphorisms associated with a person rather than a specific document, etc. in addition certain formal citations.

Example 4a

<cite for="quote-833243">Kathy Moore</cite>, my mother, frequently stated that, <q id="quote-833243">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4b

<cite id="quote-833243">Kathy Moore</cite>, my mother, frequently stated that, <q cite="#quote-833243">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4c

Kathy Moore, my mother, frequently stated that, <q cite="Kathy Moore">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4d

Kathy Moore, my mother, frequently stated that, <q cite="sgn://example.com/?ident=kathymoore">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4e

Kathy Moore, my mother, frequently stated that, <q cite="mailto:kathy@example.com">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4f

Kathy Moore, my mother, frequently stated that, <q>you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example Set 5

You caught me…I want the cite tag to convey that I am citing the source of content that would benefit from a citation. Not to mark up all my titles 😉 so that they are italic. There are several things I might want to do as a result: associate a q (material) with a particular cite tag (source), have the cite tag (source) to direct to the q (material), have the cite tag (source) to link to a URL, and/or have the q (material) direct to the cite tag (source). Maybe not all at once, but associating the material with the source does create more coherent relationships between sections of a document and starts down the road of making advanced citing concise. A bunch of examples follow…

Example 5a

<q id="quote-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
[...]
<cite for="quote-309342">Fallacy. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy</cite>

Example 5b

<q cite="#cite-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
[...]
<cite id="cite-309342" href="http://en.wikipedia.org/wiki/Fallacy">Fallacy. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy</cite>

Example 5c

<q cite="#cite-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
[...]
<cite id="cite-309342" href="http://en.wikipedia.org/wiki/Fallacy">Fallacy</cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy

Example 5d

<q cite="#cite-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
[...]
<cite id="cite-309342"><a href="http://en.wikipedia.org/wiki/Fallacy">Fallacy</a></cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy

Example 5e

<q id="quote-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
[...]
<a href="#quote-309342"><cite>Fallacy</cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy</a>

Example 5f

<q cite="http://en.wikipedia.org/wiki/Fallacy">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
[...]
<cite>Fallacy</cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy

Why it’s not that way?

So far as I can tell, this is the general reasoning,

I don’t understand why it would be more useful [to allow author names and full formal citations as valid cite content]. Having an element for the typographic [AN: presentational?] purpose of marking up titles seems more useful than an element for the [AN: semantic?] purpose of indicating what is a citation.Ian Hickson

I’ve thought about it, and it’s obvious I don’t understand. The word “semantic” sure is tricky. Yes, a tag that means “title” adds that meaning to the text it’s marking up. So it’s definitely semantic.

It just seems like the wrong semantics. Because a citation, quoted text, and the relationship between those two could also be expressed with semantic markup…just not with the markup we’ve got right now. And that makes no sense, because the word cite does not mean, “the title of anything I’m mentioning”. I guess that’s the core of my objection. It may seem trivial, but I think cite needs work.

Though it’s not just the new HTML5 definition. cite has always felt a little off.