Footnotes on the Web

Important writing has footnotes. The web sucks at footnotes. Therefore there is no important writing on the web.

The Problem

The concept of the physical page is absent on the web and with it's demise so too have footnotes been destroyed as a useful tool. Non fiction writing and annotated literature have long used footnotes to markup their works with citations or parenthetical comments. A well annotated book gives the reader all of the satisfaction that clicking through articles on Wikipedia does; it induces thought and provides the curious with a route to discovery.

If we could effectively annotate the web, it would promote a higher level of accountability and discourse (see's implementation below). Footnotes provide a way for an author to document to their sourced ideas and the readers a tool allow others to dispute claims.

Footnotes vs Side notes vs End notes


Footnote /fo͝otˌnōt/ noun - an ancillary piece of information printed at the bottom of a page.


Footnotes are the standard way to cite and annotate text in books. In informationally dense texts footnotes often cover 25% or more of the page e.g. The Oxford Study Bible. While some despise footnotes, for me they share equal importance with the text they annotate displaying prior, contrary, or supplemental knowledge.

The concept of a page on the web is different from a page in a book. Most web pages today represent the entire written work, at best they are a single chapter or subsection of a work. When footnotes are present on the web, they are really end notes. In a book there is a limited distance between an annotation and the relevant text. On the web most annotations won't be visible while reading, requiring you to click to jump to the part of the page where the note is or showing a popover dialog with the note.

Side Notes

Side note noun - a notation made in the margins or sides of a page; also called marginal note

Side notes

Side notes are the cousin of the footnote. In printed books, usually textbooks or larger format books, they are used in place of footnotes, especially when diagrams or images are part of the annotation. On the web side notes are a useful way to keep annotations in close proximity with the relevant text. This usefulness breaks down on mobile devices, in portrait orientation, there just isn't room to have side notes.

End Notes

End note noun - a tool for narcissistic writers required to cite their sources to hide shit in the back of a book

End notes

End notes in a book have the same problem that footnotes do on the web. You've got to jump around all over the place to see where this alarming statement of fact made by an author is coming from. Ain't nobody got time for that.

Implementations side notes - Desktop

Medium, despite it's evils is doing a pretty bang up job with their side notes. Notes are viewable on mobile as well as desktop, threaded replies are enabled. What they've really done is take commenting to the next level. An author can annotate their content, and the general public can reply. This mix of citation and discussion is really what the web demands. The only complaint to be had here is that the discussion is obscured, which is how Medium has solved the problem of showing side note content much longer than the piece of text. side notes - Mobile


This jQuery plugin is as good as it gets for the self publisher. On desktop, you can acheive well placed sidenotes without a ton of work. The plugin automatically parses converted Markdown footnotes and makes them into sidenotes. On devices without enough room to show side notes it reverts to end notes and the default strategy of anchor links to navigate to and from notes.


jQuery.sidenotes on Desktop


jQuery.sidenotes on a Tablet


jQuery.sidenotes on Mobile


BigFootJs Popover

Listen. This library does something. I'll admit that. But it doesn't acheive anything in the way of annotating text in a useful way. Think about all the UX no-nos here. Content obscured, useless touch targets, strange mouse behavior if you click. Annotations should be relatively static. If the content they're related too is no longer visible then ok, don't show them. But most readers have never encountered this style of note.

HTML Anchors

This is the 'old' way to do things. What is produced is really end notes in most cases. Unless the text is quite small, you're going to create a really negative jumping around experience. Massive amounts of automatic scrolling gets disorienting fast and it doesn't help that when you click on an link to return to the anchor in the text you were reading, the text won't be where you left it. You're going to end up scrolled to some point further than you previously were if the footnote anchor was anywhere below the first line of visible text.

Hey Scotchy you f****r, where are your footnotes?

When I'm done solving world hunger I'll move on to solving footnotes on the internet. For now maybe some type face expert in Brooklyn can team up with a Javascript Guru Ninja from Mountain View and fix this. Get off my back already.

Posted on Aug 3
Written by Scotchy