{"id":19991,"date":"2023-07-09T01:00:24","date_gmt":"2023-07-09T08:00:24","guid":{"rendered":"https:\/\/www.kith.org\/jed\/?page_id=19991"},"modified":"2025-09-20T23:41:50","modified_gmt":"2025-09-21T06:41:50","slug":"html-footnotes","status":"publish","type":"page","link":"https:\/\/www.kith.org\/jed\/hodgepodge\/code\/html-footnotes\/","title":{"rendered":"HTML footnotes"},"content":{"rendered":"\r\n<script type=\"text\/javascript\">\r\n\r\n\/\/ Macromedia JS code streamlined by Jed Hartman, 5\/24\/2025.\r\n\/\/ Could simplify even further by just passing the visibility value\r\n\/\/ ('visible' or 'hidden') instead of passing the words 'show' and\r\n\/\/ 'hide'.\r\n\r\nfunction JH_showHideElement(item, vis) {\r\n  var obj;\r\n  if ((obj = document.getElementById(item)) != null) {\r\n    if (obj.style) {\r\n      obj = obj.style;\r\n      vis = (vis == 'show') ? 'visible' : (vis == 'hide') ? 'hidden' : vis;\r\n    }\r\n    obj.visibility = vis;\r\n  }\r\n}\r\n\r\n<\/script>\r\n\r\n<style type=\"text\/css\">\r\n\r\n.footnote {\r\n  font-size: smaller;\r\n  position: absolute;\r\n  width: 20em;\r\n  z-index: 1;\r\n  visibility: hidden;\r\n  background-color: #CCFFFF;\r\n  layer-background-color: #CCFFFF;\r\n  padding: 8px;\r\n  border: 1px solid #000000;\r\n  text-indent: 0px;\r\n}\r\n\r\nsup {\r\n  font-size: smaller;\r\n  color: #0000FF;\r\n}\r\n\r\n<\/style>\r\n\r\n<p class=\"pub-history-dates\">(Main text last modified 28 April, 2003. Meta-notes and formatting and code last modified 24 May, 2025.)<\/p>\r\n\r\n<hr width=\"25%\" \/>\r\n\r\n<p>This page demonstrates one way to implement footnotes<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote1','show')\" onmouseout=\"JH_showHideElement('footnote1','hide')\">1<\/a><\/sup><span id=\"footnote1\" class=\"footnote\">The footnote is named for Sir James Footnote, who cited a source for his every utterance.<\/span> in HTML.<\/p>\r\n<p>To view a footnote on this page, move the pointer over a footnote number.<\/p>\r\n\r\n<h2>Uses of the footnote<\/h2>\r\n<p>Many scholarly works<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote2','show')\" onmouseout=\"JH_showHideElement('footnote2','hide')\">2<\/a><\/sup><span class=\"footnote\" id=\"footnote2\">(and, obviously, some not-so-scholarly ones)<\/span> include footnotes. A footnote can be used for any of six major purposes:<\/p>\r\n<ul>\r\n  <li>To digress.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote3','show')\" onmouseout=\"JH_showHideElement('footnote3','hide')\">3<\/a><\/sup><span id=\"footnote3\" class=\"footnote\">Which reminds me of a Tom Lehrer recording. But I digress.<\/span><\/li>\r\n  <li>To obfuscate.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote4','show')\" onmouseout=\"JH_showHideElement('footnote4','hide')\">4<\/a><\/sup><span id=\"footnote4\" class=\"footnote\">Generally through the use of cryptic abbreviations: viz., <i>ibid<\/i>, <i>op cit.<\/i>, <i>passim<\/i>, et al., q.v.<\/span><\/li>\r\n  <li>To confuse the reader.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote5','show')\" onmouseout=\"JH_showHideElement('footnote5','hide')\">5<\/a><\/sup><span class=\"footnote\" id=\"footnote5\">After all\u2014as the poet has so aptly noted\u2014\u201cWhither the lovely glockenspiel in flight? \/ Whither the brackish ptarmigan by night?\u201d<\/span><\/li>\r\n  <li>To be pedantic.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote6','show')\" onmouseout=\"JH_showHideElement('footnote6','hide')\">6<\/a><\/sup><span id=\"footnote6\" class=\"footnote\">\u201cIt\u2019s hard to be a pedant in a world that\u2019s wrong Wrong WRONG!\u201d \u2014Zed Lopez<\/span><\/li>\r\n  <li>To cite references that<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote7','show')\" onmouseout=\"JH_showHideElement('footnote7','hide')\">7<\/a><\/sup><span id=\"footnote7\" class=\"footnote\">(if you\u2019re lucky)<\/span> nobody will ever look up.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote8','show')\" onmouseout=\"JH_showHideElement('footnote8','hide')\">8<\/a><\/sup><span id=\"footnote8\" class=\"footnote\">Pedant, Irene Melissa Anne, \u201cA study about whether readers ever look up citations,\u201d <cite>Journal of Footnote Research<\/cite> 18:53-112.<\/span><\/li>\r\n  <li>To show off the author's erudition.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote9','show')\" onmouseout=\"JH_showHideElement('footnote9','hide')\">9<\/a><\/sup><span id=\"footnote9\" class=\"footnote\">\"Erudite\u2014wasn\u2019t she the Greek goddess of wisdom?\u201d \u2014Jennifer Skurnick<\/span><\/li>\r\n<\/ul>\r\n\r\n<h2>Obtaining footnote text <\/h2>\r\n<p>Before creating a footnote, one must first obtain a reference or a parenthetical aside. References may be obtained by consulting any library;<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote10','show')\" onmouseout=\"JH_showHideElement('footnote10','hide')\">10<\/a><\/sup><span id=\"footnote10\" class=\"footnote\">or by requesting them from a job candidate<\/span> be sure to choose a book or article with an impressive-sounding title. Parenthetical asides are also easy to come by: merely think of something irrelevant to the topic at hand, and write it down.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote11','show')\" onmouseout=\"JH_showHideElement('footnote11','hide')\">11<\/a><\/sup><span id=\"footnote11\" class=\"footnote\">Failing\r\nthat, references and parenthetical asides are available on reasonable terms from the present author. <a href=\"mailto:logos-footnote@kith.org\">Inquire within<\/a>.<\/span><\/p>\r\n\r\n<h2>Stalking the wild footnote<\/h2>\r\n<p>Footnotes are easily startled.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote12','show')\" onmouseout=\"JH_showHideElement('footnote12','hide')\">12<\/a><\/sup><span id=\"footnote12\" class=\"footnote\"><b>Boo!<\/b><\/span><\/p>\r\n<p>If you encounter a footnote that is foaming at the mouth or shows other signs of rabies, do not under any circumstances attempt to capture it yourself. Instead, immediately contact your local university's Comparative Literature department, which will be happy to send a trained expert to assist you.<\/p>\r\n\r\n<h2>Preparing a footnote<\/h2>\r\n<p>Footnotes are tasty straight out of the box as a low-calorie snack.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote13','show')\" onmouseout=\"JH_showHideElement('footnote13','hide')\">13<\/a><\/sup><span id=\"footnote13\" class=\"footnote\">A single footnote supplies almost 85% of the USRDA of tedium.<\/span><\/p>\r\n<p>If you prefer, you may saut\u00e9e them with butter and onions, and wrap them in pita. If you must cook a footnote in the oven, be sure to stop when it's half-baked.<\/p>\r\n\r\n<h2>Care and feeding of the footnote<\/h2>\r\n<p>If you treat your footnotes well, they will breed. In general, the more footnotes a given work has,<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote14','show')\" onmouseout=\"JH_showHideElement('footnote14','hide')\">14<\/a><\/sup><span id=\"footnote14\" class=\"footnote\">(even\r\ngratuitous ones)<\/span> the more it is likely to acquire.<sup><a href=\"javascript:;\" onmouseover=\"JH_showHideElement('footnote15','show')\" onmouseout=\"JH_showHideElement('footnote15','hide')\">15<\/a><\/sup><span id=\"footnote15\" class=\"footnote\">Case\r\nin point.<\/span> Some articles contain more text in the footnotes than in the main text.<\/p>\r\n\r\n<h2>Conclusion<\/h2>\r\n<p>Treat your footnotes well, and they shall wax fertile, and multiply.<\/p>\r\n\r\n<h2>Notes<\/h2>\r\n<p>The original version of this page, written in 1999, demonstrated the use of a footnote object that I created for use with Dreamweaver version 3.<\/p>\r\n<p>In 2003, the code that I used became obsolete in various ways, so I rewrote it to use better CSS and better\/later versions of the Macromedia show\/hide layers code.<\/p>\r\n<p>I revisited the page in 2023, and was surprised to find that the code still worked perfectly. Nice work, Macromedia JavaScript engineers of the early 2000s! I feel like it\u2019s not often that code still works without revision twenty years later.<\/p>\r\n<p>But I did improve the CSS a little in 2023.<\/p>\r\n<p>In 2025, I removed most of the Macromedia code; that code was designed to be much more general-purpose than I needed for footnotes.<\/p>\r\n<p>Sadly, there is still no <code>&lt;footnote&gt;<\/code> element in HTML.<\/p>\r\n<p>My implementation of footnotes on this page is probably not very accessible; I haven\u2019t yet tried it with a screen reader, but I suspect that it wouldn\u2019t work very well. It\u2019s presumably also not very mobile-friendly, given that it relies on hover\/mouseover.<\/p>\r\n\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":5479,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-19991","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/19991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/comments?post=19991"}],"version-history":[{"count":21,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/19991\/revisions"}],"predecessor-version":[{"id":21357,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/19991\/revisions\/21357"}],"up":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/5479"}],"wp:attachment":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/media?parent=19991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}