Summary: Integrate footnotes into the main flow of text and employ CSS styles to control their appearance. Gradual improvements to CSS may offer ways in future to further improve the typography of your site without having to alter the source code.
Before we get into the placement issues, let's look at the term "footnote". In online text, this is a sure-fire misnomer, since footnotes are, properly speaking, a form of supplementary information placed at the visible foot of a printed page. If your page cannot be all taken in at a glance, but rather requires scrolling- and most online texts do burst the bounds of an 800-by-600 screen— then it has no "foot".
Printed pages, like mountains, have feet in the sense of a place that one must pass by during the descent (or ascent). Web pages however never require visitors to pass by their lower extremities. Call the bottom of the page the "nether regions" or whatever you like, but not a foot. From a macro-typographical viewpoint, only the visible structures on the screen can be said to have feet: the screen itself, graphic blocks, the headings and of course the paragraphs.
Still, footnote is the easily understood word for this genre of information, and has passed into the English language in phrases such as "a footnote in history" (for an insignificant event), so let's keep using it.
Examples: • Endnotes • Separate Notes • Side Notes • Pop-Ups • Interleaving • Cut-In Notes • Highlighting • Keywords
Piggin.Net Macro-Typography by Jean-Baptiste Piggin is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.