Marking up a Bibliography with HTML5

20 February 2012

After reading this recent post on the new and improved time element, it got me thinking about a rather specific issue and how the <time> element might be used when marking up a bibliography. As an occasional student of history with the Open University (OU), this is something that I know a bit about, but how one would mark this up with HTML I wasn’t sure. So I thought I’d take a look at doing so.

For a sample piece of text, I have taken one of my own answers to an OU assignment as it already has a ready made bibliography. There are a number of different formats that can be used when laying out a bibliography, the one that this text uses is the Parenthetical or Harvard method of referencing.

The Bibliography

I’ll begin with marking up the bibliography itself, and then move on to how it might be linked to the quotations used in the actual text itself.

Since a bibliography is essentially a list of references, and an ordered one at that, I enclose the entire list in an <ol> element.

Note: only one element in the list is shown here for simplicity.

<ol>
   <li>Cassius Dio, 50:5; quoted from Cassius Dio: The Roman History:
The Age of Augustus, (trans.) (1987) Scott-Kilvert I.; reprinted in 
AA100 Assignment Booklet (October 2010), Milton Keynes, The Open 
University, p.18.</li>
</ol>

Nothing special there of course, but next we’ll take a look at the <cite> element, which has been redefined in HTML5 and is used to represent the title of a work, including one that is quoted from, which naturally suits a bibliography entry.

Note: HTML5 Doctor discusses the cite element in detail.

In the example that I’ve used here, the title of the quoted work is rather complex, as it mentions a quoted work within a quoted work. I think that it’s sufficient that only the reference that was actually used for the quotation should be contained within a <cite> element, in this case “AA100 Assignment Booklet”, and not the work that this work references (“Cassius Dio: The Roman History:The Age of Augustus” in this example).

<ol>
   <li>Cassius Dio, 50:5; quoted from Cassius Dio: The Roman History:
The Age of Augustus, (trans.) (1987) Scott-Kilvert I.; reprinted in 
<cite>AA100 Assignment Booklet</cite> (October 2010), Milton Keynes, 
The Open University, p.18.</li>
</ol>

Note how only the title is enclosed within the cite element, and nothing else.

Note: A browser will usually italicise the text enclosed within a <cite> element, but of course you can remove this should you wish via CSS.

You’ll notice how the entry also has two years in this case, and I feel that it’s appropriate here to use the <time> element to markup both of these years as they are both important semantic bits of information in relation to a bibliography entry.

For this I use the new fuzzy referencing methods of the <time> element mentioned above.

<ol>
   <li>Cassius Dio, 50:5; quoted from Cassius Dio: The Roman History:
The Age of Augustus, (trans.) (<time datetime='1987'>1987</time>) 
Scott-Kilvert I.; reprinted in <cite>AA100 Assignment Booklet</cite>
(<time datetime='2010-10'>October 2010</time>), Milton Keynes, The 
Open University, p.18.</li>
</ol>

That’s it for the bibliography entry for now, so I’ll move on to the actual quotations within the text itself.

Quotations

The HTML5 specification contains an element whose purpose is to enclose quotes and quotations, and that is the <q> element.

The specification defines this element as:

The q element represents some phrasing content quoted from another source.

This definition fits the quotations within the text exactly, so of course all quotations used within the text are enclosed thusly.

<q>who would not groan at hearing that Roman knights and senators grovel before her
 (Cleopatra) like eunuchs?</q>

In academic texts, such quotations are linked to the bibliography entry that they reference via inline referencing that is included after the quote itself. This information usually contains a year value to aid with the reference, e.g. “(Scott-Kilvert, 1987, in Fear, 2010, p.27)”, but I don’t think that this needs to be enclosed within a <time> element as the same information will be contained in the actual bibliography entry, which is more semantic anyway.

Of course this information makes it easy for a reader to match up the relevant values in order for them to locate the correct bibliography entry. But surely this can be improved on within an HTML document?

Of course it can! The <q> element has an attribute called cite whose purpose is to contain a valid URL that links to the source of the content within the <q> element. We can use this by adding unique ids to each list entry in our bibliography, and then adding an in-page link to that id in the cite attribute of the <q> element.

<ol>
   <li id='#bib01'>Cassius Dio, 50:5; quoted from Cassius Dio: The 
Roman History: The Age of Augustus, (trans.) (<time datetime='1987'>
1987</time>) Scott-Kilvert I.; reprinted in <cite>AA100 Assignment 
Booklet</cite> (<time datetime='2010-10'>October 2010</time>), 
Milton Keynes, The Open University, p.18.</li>
</ol>

<q cite='#bib01'>who would not groan at hearing that Roman knights and senators grovel 
before her (Cleopatra) like eunuchs?</q>

Note: browsers usually add quotes themselves around the <q> element so you don’t need to add that content yourself.

The specification states that browsers should enable users to follow such links, but none of the major browsers actually do this. Naturally this behaviour can be mimicked via JavaScript via jQuery (if your site already includes it you might as well):

<script>
   $(function() {
      $('q').click(function() {
         window.location = $(this).attr('cite');
      });
   });
</script>

or plain old JavaScript (as it’s a bit much to include the entire jQuery library just for this!). This needs to be placed near the end of the file, after the markup.

<script>
   var quotes = document.getElementsByTagName('q');
   for (var i in quotes) {
      quotes[i].addEventListener('click', function() { 
         window.location = this.getAttribute('cite'); },
      false);
   }
</script>

Of course I’ve made a complete example available online for you to see it in action (not that it does much!).

Please do comment below should you wish to add or suggest anything, or to point out any mistakes or thoughts in general to what I’ve done here. I look forward to hearing from you!