Citing in HTML5 (cite attribute and cite tag)

Posted: September 23rd, 2009 | Author: Rachael L. Moore | Filed under: HTML | Tags: Attribution, Citation, cite, HTML, HTML5, q, Quotations, Semantic Markup, Valid Code | 2 Comments »

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 a citation of a source or reference. It’s a tag with history but I will be primarily addressing cite as it’s described in HTML5. The HTML5 specification defines cite as … the title of a work … [which] can be … quoted or referenced in detail … or … mentioned in passing.

I personally feel this stifles the potential of the cite tag. When I read that definition I mentally measured it against situations in which I have considered coding with or have coded with cite in the past and felt it made what could be a very useful tag rather shallow. Google (it knows all, it sees all) 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 blog entry which states, “Let’s see, what is going on with me right now? I am currently re-reading Storm Front from The Dresden Files by Jim Butcher. And my little sister has left for Spain — the lucky dog!” Of course cite can also be used in references (though only around titles) like “Butcher, Jim. (1999). Storm Front. New York, NY: Idunno Press.” 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” — 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 citations without doing any harm. I believe the cite element will benefit if it 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 HTML5 WG do not remember college research papers and have blocked from their minds the vagaries of APA, MLA, Chicago, etc. This flashback is brought to you as a reminder that 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?

And just contrast that with the cite attribute — it’s the same word and sometimes serves the same purpose, but implemented with completely different data! cite-the-element can only contain titles and cite-the-attribute can only contain valid URLs (whatever that means in the HTML5 spec). Hilariously, 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 and overlapping purposes are each unnecessarily limited and mutually exclusive.

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. Yet the cite tag conspicuously lacks any way to perform this basic task of associating a citation with the information being cited 1. I consider this a 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

 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. <code class="example excerpt"> <cite href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</cite> is a work in progress. </code> 

Example 3b

 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. <code class="example excerpt" cite="http://meyerweb.com/eric/html-xhtml/html5-linking.html"> <cite href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</cite> is a work in progress. </code> 

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

Your Moment of Zen?

There comes a time in every woman’s life when the chaos in the world becomes overwhelming…

Ian Hickson

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.

Perhaps I don’t understand. That word “semantic” sure is tricky. But it’s fun to say. Try it, 9 times fast!

WHATWG HTML5 Working Draft

This specification is limited to providing a semantic-level markup language … The scope of this specification does not include providing mechanisms for media-specific customization of presentation … The WHATWG was based on several core principles, in particular that technologies need to be backwards compatible, that specifications and implementations need to match even if this means changing the specification rather than the implementations…

Footnotes

cite can make use of the global attributes defined by HTML5 which include item, itemfor, and itemprop. It may be that these would optionally create some relevant functionality. I have not yet investigated these attributes beyond noting their existence. However, if it turns out that itemfor is a close relation to for I think its inclusion in the spec may be redundant — or at least not relevant as a complete solution to my cite wishlist. Better to specify the implementations already exist and codify the common and familiar usages, right, HTML5?
for is already familiar to us from using it with label and input. for explicitly associates a label with an input. For that reason it is well-suited to associate cite with whatever content might need a citation. I conjecture it ought be easiest for search engines, browsers, scripts, validators, and authors to expand upon the use of something already accommodated and familiar. Especially since it’s so goshdarn literal and doesn’t sound any alarms for me as a philosophically bad practice — what’s good for the goose (label) is good for the gander (cite).

Rachael L. Moore

Web Designer & Web Developer in Tallahassee, Florida

The design and development scrapbook of Rachael L. Moore; a venue for thoughts on web design and web development.