Since I got a hang of separating structure, presentation and behaviour in web pages, I have been interested in semantics of HTML elements. It may be because of my academic background (I studied literature in university), but I just love marking up my web pages. Even when writing blog posts on my iPod Touch, I don’t mind squeezing in < and > signs and constantly overruling auto-correction of HTML tags. This may be the reason for writing this amount of text about an obscure, rarely used HTML element like
citeelement in HTML 4
The HTML 4-specs are rather concise about the semantics of most elements. When discussing the semantically correct element to use, people people tend to look at the HTML5 draft, which I think is generally a good idea. However, in some cases the differences between HTML4 and HTML5 cause confusion.
This is definitely the case for the
cite element. Some people think you should use the
cite-element to mark up quotations. This is clearly not the case, as the HTML4-specs specify the
q for quotations.
The HTML4-specs defines the
cite element as follows:
- Contains a citation or a reference to other sources.
I don’t think it was a wise choice to use the word
citation, as it has different meanings with subtle differences that are sometimes not easily translated in — for instance — Dutch. As a result, it’s no wonder that some Dutch developers use
cite for marking up quotations.
The HTML4-specs have two examples to illustrate the use of the
<CITE>Harry S. Truman
<Q lang="en-us">The buck stops here.
More information can be found in
Both examples suggest that the
cite element should be used for marking up the source of a nearby quote. Opera Developer Community has a good description of
citeelement is used to indicate where the nearby content comes from — when quoting a person, a book or other publication, or generally referring people to another source, that source should be wrapped in a
In my opinion, this use of the
cite element is semantically relevant, although I would have added a
for attribute (cf.
select), to connect the
cite element to the right
q element. Like so:
<cite for="quote1">Harry S. Truman
<q lang="en-us" id="quote1">The buck stops here.
Or something similar.
citeelement in HTML5
The HTML5 draft defines the
cite element completely different:
citeelement represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.
A person’s name is not the title of a work [...] and the element must therefore not be used to mark up people’s names. [...]
Well, something definitely changed. Nonetheless, the document describing the HTML5 differences from HTML4, doesn’t even mention the
Let’s have a look at the differences.
In short, HTML5 is not backward compatible with HTML4 as far as the
cite element is concerned.
In fact, the
cite element in HTML5 is a semantic wrapper the titles books etc. Frankly, I can understand this, as the default styling of
cite is italic in most browsers (I checked Firefox 3 and Safari), which probably caused the restriction from any source to just titles.1
The browser makers are wrong here. If they had defined the default styles in accordance with the HTML4 specs, they would have let
cite look like plain text. I mean, why would Harry Truman’s name have to be italic in the example above? In offline texts it wouldn’t, right? I guess the initial decision to make
cite italic by default was made because someone just assumed that it was intended for book titles etc.
ielement for titles
Although I understand that HTML5 is following this practice, I would suggest to use the
i element for marking up titles. Anyway, that’s what I use in HTML4:
<p><q>And if you want to give them something, give no more than alms, and let them beg for that!
<i class="book">Thus spoke Zarathustra
Of course it’s recommended to add a semantically relevant class to the
book in this case. For marking up the title of a poem, I would use
<i class="poem">, because in Dutch literary studies, the title of an individual poem is not displayed italic, but within single quotation marks. So, in my CSS, I could use:
Where does this leave us, if we want to use the
cite element in a forward compatible way? ‘Forward compatible’ as in: easy to convert from HTML4.01 to HTML5. I mean, by the time HTML5 is ready I want to be able to upgrade my entire site by changing my templates and not by changing the markup of the individual posts.
I would advise to just avoid any use of
cite that is not in accordance with both the HTML4 and the HTML5-specs. So, do not use it (any more) for marking up people or book titles without a nearby quotation. This means, you cannot use
cite as a wrapper for making titles italic. Use the
i tag with semantic class names for that.2
The best solution however is that in HTML5
cite will be defined differently. If there is a need for an element to mark up titles, think of a new element, so there is backward compatibility with HTML4.01. Or we could start a little riot....