How should I format my citations and bibliographic data?

By Brian Tomasik

First published: . Last nontrivial update: .

Summary

This page records my evolving thoughts about how best to write citations and bibliographic information in my articles.

Contents

Why not bare URLs?

Many amateur blogs on the web don't worry about citations at all. People often cite another web page using only a hyperlink. For short-term, throwaway writings, this is usually fine. But if you want your site to last a long time (see the "Long Site" section of Branwen (2010-2019)), then bare URLs aren't good because of the problem of link rot (Luca 2010).

Another downside of citations via a bare hyperlink is that unless you explicitly identify the author and/or title of the work in your text, you don't have a way to refer back to the source later. That's fine if you only cite the source once, but if you want to be able to talk about the source in multiple places within your article, then it helps to explicitly name the source, like this as an example: "Smith (2008)".

Some web articles use in-text citations without any hyperlinks, like this:

<p>Ice is cold (Smith 2008).</p>


<h2>Works cited</h2>

<p>Smith, John. 2008. "The coldness of ice".</p>

This is how citations were done before hypertext became popular. The big downside with this approach is that if a reader wants to look up the bibliographic information or URL for a citation, s/he has to navigate all the way down to the "Works cited" section of the page to find that information. It's much easier if a reader can just click a link on the in-text citation itself.

Another approach can be to cite using footnotes, in which case the reader can click the footnote to quickly find the bibliographic information. However, one downside of this approach is that readers won't be able to distinguish between citational versus discursive footnotes. Readers who don't want to read the citational footnotes may therefore miss your discursive footnotes.

These problems can be remedied with more advanced styling of the page. For example, some academic articles (like this one) contain in-text citations that, when clicked, pop up bibliographic information that includes hyperlinks. But this level of functionality adds complexity to your website.

Another cost of giving full citations is the manual work required to create them. Of course, there are programs that automatically collect bibliographic data, and you can get BibTeX data for academic articles from Google Scholar. But I'm nervous about the accuracy of automated bibliographic data. When I wrote this paper, I initially just collected BibTeX information from Google Scholar. But then a friend told me that Google Scholar's citations could be inaccurate. I checked a few instances to see if this was true, and I grudgingly realized that it was. I don't remember exactly how many automated Google Scholar citations in that paper had errors, but it was several—enough that I was forced to spend ~4 hours going back through all the citations to check them. Maybe it's ok to have some inaccurate citations? Maybe people don't care that much? But I'm nervous about not checking something that has my name on it, so I'd rather not deal with this problem.

How to format and hyperlink in-text citations

As mentioned in the previous section, I prefer to hyperlink my citations rather than requiring a reader to navigate all the way down to a "Works cited" list at the bottom of the page. But questions remain regarding how to format and hyperlink in-text citations. Following are some possibilities for writing an example two-sentence passage:

  1. In "What Is the Difference Between Weak Negative and Non-Negative Ethical Views?", Simon Knutsson problematizes the naive idea that weak negative utilitarians give more "weight" to suffering than happiness, while non-negative utilitarians give "equal" weight. Knutsson believes we need to think about the situation differently.
  2. This paper problematizes the naive idea that weak negative utilitarians give more "weight" to suffering than happiness, while non-negative utilitarians give "equal" weight. The author believes we need to think about the situation differently.
  3. Knutsson (2016) problematizes the naive idea that weak negative utilitarians give more "weight" to suffering than happiness, while non-negative utilitarians give "equal" weight. Knutsson (2016) believes we need to think about the situation differently.
  4. Knutsson (2016) problematizes the naive idea that weak negative utilitarians give more "weight" to suffering than happiness, while non-negative utilitarians give "equal" weight. Knutsson (2016) believes we need to think about the situation differently.

Pros and cons of each:

  1. This approach provides the greatest amount of readily visible information, which is good for readers who want that and bad for readers who don't. If the hyperlink has rotted, the title is easily accessible for Googling, especially for readers on touchscreen devices who may not have the ability to hover over the link in order to see its title in the title="" attribute. Because of the verbosity of this approach, I tend to avoid it (as of 2017).
  2. This approach is the opposite of the previous one. It optimizes for not cluttering the text, inviting readers to view the title and click the link only if they care to know the details of the source. One downside is that because the article is listed anonymously, you can't easily refer back to the source later on in your piece.
  3. The problem of referring back to an article multiple times is solved by this option, which uses the regular name-year citation style to identify articles in order to refer to them later. By hyperlinking the article at each citation, you allow readers to navigate to the source article from any point in your piece. However, hyperlinking on every occurrence of an in-text citation clutters the text and may be distracting.
  4. This option is the same as the previous one but only hyperlinks the first mention of a citation. This is easier on the writer (since the hyperlink and title only have to be written once) and avoids clutter. However, readers who skim or skip around your article may miss the first instance of the citation and so may not realize that you've given the hyperlink. Readers may wonder why the citation has no link or title associated with it.

From roughly 2017 to 2018, I used option #4 both because of its benefits for readers and because it was easy for me as the writer. I asked friends on Facebook about some of these options, and many people liked option #4, although some preferred #3.

Linking to a bibliographic entry?

In 2018, I toyed with the idea of doing (minimalist) bibliographic entries at the bottom of my articles. However, I never ended up doing this method.

If I were to do this approach, I would link to a bibliographic entry from the first mention of that source in the text. In other words, I would do approach #4 for citations discussed above, but instead of linking to the source URL directly, I would link to the bibliographic entry at the bottom of my page, which would contain the author(s), year, a hyperlinked title, and perhaps other information. For example, instead of a citation like

<a href="https://foundational-research.org/what-is-the-difference-between-weak-negative-and-non-negative-ethical-views/" title="'What Is the Difference Between Weak Negative and Non-Negative Ethical Views?'">Knutsson (2016)</a>

I would write

<a href="#Knutsson_2016">Knutsson (2016)</a>

...

<h2>References</h2>

<p id="Knutsson_2016">Knutsson (2016). "<a href="https://foundational-research.org/what-is-the-difference-between-weak-negative-and-non-negative-ethical-views/">What Is the Difference Between Weak Negative and Non-Negative Ethical Views?</a>" Foundational Research Institute.</p>

This is slightly more work than just linking to the cited article directly, but it has some advantages:

  1. Without a "References" list at the end, if a reader misses the first mention of an in-text citation, that reader may not know where to find the source article. But if there's a "References" section at the end, the reader can navigate there to find the bibliographic info.
  2. I think the hover-over title="" attribute doesn't display on touchscreen devices, so touchscreen viewers can't easily see the title information. And even desktop readers may not realize that they should hover over the hyperlink to see title information. Including such information directly in the article makes it super obvious where to find that info.

The effort required for me to add references in the "References" section shouldn't be too high if I don't feel the need to include exhaustive bibliographic information or to carefully follow standard bibliographic formatting rules. The purpose of bibliographic information is ultimately just to allow readers to find the original source, so as long as the information is presented clearly, I don't need to worry about proper formatting too much. For example, for a journal article with volume number 5 and issue number 2, I could write "volume 5, issue 2" rather than remembering the more proper format of "5(2)". I think explicitly writing out "volume" and "issue" is more transparent to readers anyway.

Unfortunately, I imagine I shouldn't add "References" sections when making small additions to existing articles of mine, because it would be confusing to readers if only a few of my references are in a "References" section and the rest are hyperlink citations only.

Citation tooltips

In 2019, I developed a new way to display extra information about citations. I call it "citation tooltips" because it displays bibliographic data in a box above the citation when the user hovers a mouse over the citation. For example, here's a citation for the article you're reading now using this method: Tomasik ("How should I format ..."). The idea is similar to Wikimedia's Reference Tooltips (MediaWiki "Reference Tooltips").

Starting in 2019 and continuing through the time I'm writing this in 2020, I'm using the "citation tooltips" method for newly added citations. Unfortunately, I have a lot of old hyperlinks and citations using older styles, and I may or may not ever get a chance to convert them to this new approach.

In previous years, I used an approach similar to my current citation-tooltips method: namely, I stored the title of the linked-to article in the title="" attribute of the hyperlink. If an author stores text in the title="" attribute of a hyperlink, a reader can see the text by hovering his/her mouse over the hyperlink, although it takes a fraction of a second of hovering before the browser actually shows the content. I think my citation-tooltips method is better than just using the title="" attribute for several reasons:

It's plausible that many of my readers on touchscreen devices won't ever figure out how to show my citation tooltips, but that's ok because most readers don't really need to see them. If the hyperlink hasn't rotted, then readers can just click through to see the cited page for themselves. Even if the link has rotted, most readers probably don't mind too much, and in many cases, they could look it up on the Wayback Machine if need be. A lot of the purpose for my tooltips is just to store bibliographic information for myself, so that if the link ever rots and the page isn't available on the Wayback Machine, I can try to look it up some other way. Another benefit of the tooltips is that they allow readers to preview the title, author(s), and other information about a cited document without clicking through to it, but it's fine if this "bonus feature" isn't obviously available to most touchscreen users.

My citation tooltips are implemented purely with CSS. The code is mostly taken from Chris Bracco, as you can see in the comment at the top of the relevant CSS file. Many people implement tooltips using JavaScript rather than pure CSS, but I prefer to use JavaScript only as a last resort. As of 2020, almost all the pages on my websites use no JavaScript at all, which means that people like me who browse the web with JavaScript disabled by default won't lose any functionality. Only 0.2% of pageviews worldwide disable JavaScript (Blockmetry n.d.), although the number might be slightly higher among my reader base. So my choosing not to use JavaScript is more of a principled philosophical stance than a practical issue of user experience. I wish most websites didn't use JavaScript, except for real web applications that require it.

That said, I'm open to suggestions on how to do my tooltip better, even if those suggestions require JavaScript. For now, I like the simplicity of my CSS approach, and I assume most readers don't care that much about this tooltip anyway, in which case improving it is not a huge priority. The main way I imagine my tooltip could be improved would be to make it easier for touchscreen users to display the tooltip. On Wikipedia as of the time I tried it in 2020, if you click a footnote on a touchscreen device, you get a pop-up box at the bottom showing the content of the footnote. I could theoretically do the same thing for my tooltip boxes, but in that case, clicking a link would no longer go to the linked-to page; it would just open the tooltip box. Even if I were to put a link to the destination article in the tooltip box, touchscreen users would have to click a second time to actually go to the destination page. It's plausible that this would be a worse user experience than what I have now, where you only need to click once to go to the destination page. I wonder if there's any way besides clicking to easily bring up a tooltip on a touchscreen device? I guess another option is to have an icon next to the citation that can be clicked to open up the tooltip (Anthony 2018), but these icons could be annoying to the majority of visitors who don't care about the tooltip and just want to read the article.

The text of my citation tooltips is the value of a CSS content: property, which means that I can't do formatting using HTML tags within the tooltip text Stack Overflow ("CSS content property ..."). For example, if I tried to put an academic journal's name within <i></i> tags, the tooltip text would just show the raw <i></i> tags without actually italicizing the journal name. Therefore, I instead use Markdown syntax for things like italicization. This seems fine to me because the tooltip text doesn't have to look good; it's only there for a tiny fraction of readers who want more information on a given citation.

I choose ad hoc which bibliographic data I want to put in my citation tooltips. I only need to include data that would be particularly helpful for finding the original article or that's otherwise interesting to readers. So title, author(s), dates, and similar properties are probably worth including, but maybe the specific volume and issue numbers of a journal article are less important. I write the bibliographic data in a freeform manner rather than using a specific template because there can be heterogeneous data that's hard to fit into a specific pigeon hole. For example, consider this citation: Langa et al. (2013-2018). It's a GitHub project where the "Authors" section says: "Glued together by Łukasz Langa. Multiple improvements by Yang Zhang, Jean-Louis Fuchs, Phil Lundrigan, Ben Shepherd, and Peter Hofmann." Trying to classify all those names into the "authors" category in a standardized bibliographic format would miss the fact that there was one main author of the project who accepted some contributions from additional people. With my tooltip data, I'm not trying to write an exhaustive, standardized collection of bibliographic information about a cited document; I'm just trying to list some highlights that are interesting for humans to read.

I've been uncertain whether to use citation tooltips for new citations added to existing pieces on my sites. Doing so means that a few citations in an article will have a tooltip box, while most won't, which could be confusing. So far I've decided to go ahead and add the citation tooltips for new citations, because in case I ever do convert the old citations to the new method, I don't want to keep making more old-style citations in need of conversion. As the saying goes, "if you find yourself in a hole, stop digging". On the other hand, maybe it's unlikely I ever will find time to convert the old citations to the new format...

Hyperlinking each instance of a citation

Another change I implemented in 2019 for my new citations was to insert them automatically based on an ID, rather than needing to write them out by hand. This made it easy to insert the same citation in multiple places within an article, or even in multiple different articles. As a result of this convenience, I decided to add a hyperlink and bibliographic information to each occurrence of an in-text citation, not just to the first occurrence of that citation. In other words, I switched from using option #4 to option #3 as discussed earlier.

Here are some reasons for hyperlinking each occurrence of a citation:

Writing page numbers

Some academics include page numbers in their in-text citations in the following way:

Blah blah blah (Dennett 1991, p. 204).

I use the same style for my citations. I can put a hyperlink on the "Dennett 1991" part, like this:

Blah blah blah (Dennett 1991, p. 204).

When the author name is outside of the parentheses, some academics use this style:

Dennett (1991, p. 204) says blah blah blah.

However, this doesn't work as well with hyperlinks. I don't want to hyperlink the entire citation, including the page number, because the hyperlink doesn't actually go to that specific page, just to the general work being cited. Semantically, the hyperlink should be on just the "Dennett (1991" part. But it would look weird for the hyperlink to stop midway through the parentheses. The best solution I've come up with is to put the page number in a separate set of parentheses, like this:

Dennett (1991) (p. 204) says blah blah blah.

I notice that the citations in the article Oesterheld (2016) solve this problem in a different way: they hyperlink just the year, not the author name. That also works, though it feels a bit weird not to include the author in the hyperlink anchor text.