Copyright © James R Meyer 2012 - 2018 www.jamesrmeyer.com
Footnotes (Footnote: A footnote is a note that is inserted at the end of a page, after the main material. For more information, see http://www.plagiarism.org/citing-sources/what-are-footnotes. ) can be a very useful adjunct to written material, allowing a reader to skip past details, but at the same time allowing the reader to view those details (Footnote: The details are such as to be not of sufficient interest to most readers that it should be an integral part of the text. ) if they wish. Traditionally, footnotes are indicated by a number enclosed in square brackets, (Footnote: We refer in this page to these as “footnote references”. ) with the actual footnotes appearing at the bottom of the page. The references to the footnotes are numbered in the order in which they appear in a page, and the footnotes themselves at the bottom of the page also follow the same order.
Maybe you would like to include footnotes in your web-pages, but find that the hassle involved in ensuring that the numbering is always correct is more bother than it is worth. If so, then this page is for you - it shows you how to easily add footnotes to your web-pages without having to worry about the numbering at all.
The problem with footnotes in general arises from the fact that they are numbered sequentially. This means that if you make a change such as adding or deleting a footnote you have to re-number all subsequent footnote references and the footnotes also.
And, furthermore, in a web-page, if you have clickable links from the footnote reference numbers (Footnote: Like this! This is simply a long footnote which has been put here to demonstrate this footnote system. Please understand that many of the footnotes have been inserted on this page principally for demonstration purposes! ) in the text to the actual footnote, you then have three numbers in the reference (a numbered id for returning to the reference from the footnote, a link href to the numbered id of the footnote and the number that is visible to the reader), and similarly there are also three such numbers for the footnote itself. Traditionally, all these numbers are written in manually as part of the HTML of the web-page. This means that adding, deleting, or moving a footnote can involve numerous changes to subsequent references and footnotes, and besides that being a major pain, mistakes can easily be made.
Note that this footnote system allows for multiple groups of footnotes for different sections of a web-page; this is detailed below. This page is itself divided into two sections and uses three different footnote groups. Note that the footnote references and footnotes can be styled differently for different groups, as seen in the Side Box here. Of course, for demonstration purposes, there is an overuse of footnotes on this page - such overuse should be avoided.
The system has been tested and found to work in modern browsers, IE9 and above. A quirk of some non-current browsers is that when the footnote tooltip is closed (by clicking on the x), the browser creates a line break after the footnote reference. This does not affect the readability of the material.
Very little code is required to provide the essential functionality of the system, as described below. Note that double-clicking inside a code box will select the code for copying.
The HTML code for the footnotes consists of a tiny bit of code that wraps the footnote content. It is identical for all footnotes which means that it can be saved as a code snippet for repeated use:
Note that generally you will not want a space between the character immediately before the footnote reference - for this, there should be no space between the footnote reference number and the <span class="footnote"> that is the start of the footnote span. Note that since the footnote content is within a span element, in theory only inline elements should be used within the footnote content (in HTML5 such elements are now referred to as phrasing content elements). (Footnote: If for example, you want to include indented sections within a footnote, you can do so by using <br> and a span with display:inline-block and padding-left rather than display:block, viz:
Like this short line of text.
And this longer section of text. Though having said that in theory only inline elements should be used within the footnote content, in practice, if you include block level elements inside inline tags it doesn’t produce invalid HTML, and it seems to display correctly in all browsers.
And you can follow that text by non-indented text like this.
But if you want a blank line that you specify to be a different height (as above), you have to use a display:block span, followed by <br>.
And for location of the actual footnotes, the HTML code for the div is a single line which can be saved as a code snippet:
Note that there can be several different footnote groups in different locations on the web-page. To enable this, simply add a unique suffix to the class name "footnote" of each relevant footnote span and add the same suffix to the id "Footnotes" of the Footnotes div where the footnotes are to be located.
For example, on this page, I used the basic class "footnote" for the footnote span and the basic id "Footnotes" of the Footnotes div for the first group of footnotes, and I used the class "footnoteCode" of the footnote span and the id "FootnotesCode" of the Footnotes div for the bottom group of footnotes, and I used the class "footnoteSide" of the footnote span and the id "FootnotesSide" of the Footnotes div for the Side Box group of footnotes. Note that this means that in the code snippets shown above the suffixes will need to be added manually. (Footnote: Alternatively, if the same method is being used often, additional code snippets could be made. )
Very little CSS is required for the basic functionality:And for basic functionality for printing the following is required:
… blah blah blah blah blah blah blah blah … preceding text here
(Footnote: FOOTNOTE CONTENT HERE)
the following text here … blah blah blah blah blah blah …
<script>document.documentElement.className = 'hasJS';</script>
The CSS defines that the tags with the appropriate classes (Footnote: Classes beginning with "footnote", and the class "tipContent". ) will not display provided the <html> tag has the class "hasJS", hence these tags will not display as the page loads.
<script>document.documentElement.className = 'hasJS';</script> <!--[if lt IE 9]><script>document.documentElement.className = '';</script><![endif]-->
If you are using your footnotes to cite sources for reference, then you should keep to a set style. There are common standard styles such as in MLA or Chicago style. You can find useful information on some standard styles here:
and information on citing web sources:
Finally, I must thank Alex Gorbatchev for his SyntaxHighlighter system for displaying HTML, CSS, and JS code.
If you have any comments, suggestions, or questions about the Easy Footnotes system, please feel free to contact me.
Diverse opinions and criticisms are welcome, but messages that are frivolous, irrelevant or devoid of logical basis will be blocked. Difficulties in understanding the site content are usually best addressed by contacting me by e-mail. Note: you will be asked to provide an e-mail address - any address will do, it does not require verification. Your e-mail will only be used to notify you of replies to your comments - it will never be used for any other purpose and will not be displayed. If you cannot see any comments below, see Why isn’t the comment box loading?.
Please wait for comments to load …
There is now a new page on a contradiction in Lebesgue measure theory.
There is now a new page Halbach and Zhang’s Yablo without Gödel which analyzes the illogical assumptions used by Halbach and Zhang.
I found that making, adding or deleting footnotes in the traditional manner proved to be a major pain. So I developed a different system for footnotes which makes inserting or changing footnotes a doddle. You can check it out at Easy Footnotes for Web Pages (Accessibility friendly).
I have now added a new section to my paper on Russell O’Connor’s claim of a computer verified incompleteness proof. This shows that the flaw in the proof arises from a reliance on definitions that include unacceptable assumptions - assumptions that are not actually checked by the computer code. See also the new page Representability.
There is now a new page on Chaitin’s Constant (Chaitin’s Omega), which demonstrates that Chaitin has failed to prove that it is actually algorithmically irreducible.
For convenience, there are now two pages on this site with links to various material relating to Gödel and the Incompleteness Theorem
– a page with general links:
– and a page relating specifically to the Gödel mind-machine debate:
All pages on this website are printer friendly, and will print the main content in a convenient format. Note that the margins are set by your browser print settings.
Comments on this site are welcome, please see the comment section.
Please note that this web site, like any other is a collection of various statements. Not all of this web site is intended to be factual. Some of it is personal opinion or interpretation.
If you prefer to ask me directly about the material on this site, please send me an e-mail with your query, and I will attempt to reply promptly.
Feedback about site design would also be appreciated so that I can improve the site.
Copyright © James R Meyer 2012 - 2018