Citations in HTML

So how to markup citations in standard (X)HTML that conforms to the rigors of scholarly standards? I’ve wondered about this periodically, and have again been wondering about it when looking at the recent (X)HTML5 draft.

Goals: simple, standards-compliant, information-rich. In short, I should be able to author my manuscript using the approach. It also ought to be trivial to add the support to applications, like, say, Google Docs.

How about:

<cite>
  <a href="http://ex.net/1">Doe, 1999</a>;
  <a href="http://ex.net/2">Smith, 2000</a>
</cite>

… then add a bit of CSS:

cite { font-style: normal; }
cite:before { content: "(" }
cite:after { content: ")" }

… and voila:

HTML citation

With this sort of encoding, automatically generating the reference list with, say, Javascript, would be trivial.

Potential issues:

What to do about reference lists? They’re quite common across the sciences and social sciences, and in an HTML document, it’s useful to link the in-text citations in some form to their reference entries. But with the approach above, I’m in fact linking directly; bypassing the internal reference.

So one way around this is to use some indirection:

<cite>
  <a href="#do99">Doe, 1999</a>;
  <a href="#smith00">Smith, 2000</a>
</cite>

… and in the reference list:

<li>
  <a id="do99" href="http://ex.net/1">Doe, 1999</>;
</li>

Hmm … can I do that; link to a link?? Seems to work fine in Firefox at least. So that seems like the best approach for at least my workflow.

The other issue is that some fields (notably law and the humanities) often don’t use reference lists, and put all the information in notes. I suppose a hidden reference list is a possibility, but that’s rather awkward for a reader.

5 Comments

  1. Magnus Enger says:

    A microformat could come in handy here, but alas, one hasn’t been finalized yet: http://microformats.org/wiki/citation

  2. earlycj5 says:

    I wrestled with citations in HTML for some time recently.

    I gave up on being semantically correct and went for what worked. I just enclosed citations in () in the raw HTML and used cite tags in the bibliography and elsewhere with some formatting for a hanging indent.

    But it would be nice if we were to have a real specification that the browsers followed for use in this area.

  3. Mark Tucker says:

    I am just starting with CSL, but see great potential for source citations. I would appreciate any help that you can give me in writing my first prototype CSL and getting it installed in Zotero. I have an example of what the citation should look like, but am not sure how to map the fields from the example to those available in Zotero and then make a CSL for it.

    Thanks,

    Mark Tucker

  4. Bruce D'Arcus says:

    Sorry I’m just now approving these comments. My tech guys upgraded my blog software, and it seems some stuff slipped through the cracks.

    @magnus: a microformat might be useful, but I’ve grown rather disillusioned with the whole microformats movement. I certainly won’t be spending any more of my time working on it. I do think, though, that it ought be fairly simple to settle this basic part. Perhaps the cite element is used as the wrapper, and one always makes internal links, either to the first citation where there is no reference list, or to the reference entry where it is, where the reference list gets a “reference-list” class attribute. That seems to solve my requirements. It also would probably work OK in the markdown-like languages that typically output to HTML.

    @earlycj5: I should have probably explained the use case I had in mind. It’s not just semantics-for-semantics sake, but to enable advanced web applications, where citations in essence behave like dynamic fields. E.g. I set the CSL style for a document, add my citations, and the application (or more likely plug-in) handles the rendering for me.

    @mark: I emailed you.

  5. earlycj5 says:

    Bruce, I understood what you were getting at.

    I was just sharing my experiences. I just found it interesting that someone else was wrestling with citations in HTML. It seems that there’s a distinct lack of direction on the web for how to handle citations. I couldn’t find a good definitive way for semantics sake or otherwise.

    Thanks for a great blog.


Creative Commons License Creative Commons License