Footnotes have long been used to provide to provide additional information on a page without overcrowding the body content.
They’re super easy to do in word processors such as Microsoft Word, but when it comes to websites it’s always a bit awkward.
Here’s how I approach footnotes using standard HTML and a little CSS – the result is a wikipedia style footnote that looks and feels similar to what people are familiar with.
Here’s how it would look – this guide came from itsupportguides.com1
The HTML
There are two parts of HTML required, first near the text that’s being footnoted and second at the bottom of the body content area.
This HTML would be placed near the text, if you have multiple footnotes you need to change the href accordingly – e.g. fn2.
<sup><a href="#fn1">1</a></sup>
This HTLM would be placed at the bottom of the page (body content area).
If you have more than one footnotes you would need to repeat the middle part accordingly, making sure to update fn1 to fn2 etc
<h2>References</h2> <p id="fn1">Title for footnote, <a href="http://www.itsupportguides.com">http://www.itsupportguides.com</a></p> <p><a title="Return to top of page" href="#top">↩ Return to top of page</a></p>
The CSS
The following CSS will style the footnotes so they’re superscript (smaller and positioned above the main text).
Note that the CSS has two parts – one for Internet Explorer and another for anything other than Internet Explorer.
<!--[if IE]>
<style type="text/css">
sup {
vertical-align: super;
height: 0;
line-height: 1;
}
</style>
<![endif]-->
<!--[if !IE]><!-->
<style type="text/css">
sup {
vertical-align: super;
height: 0;
line-height: 1;
font-size:80%;
}
</style>
<!--<![endif]-->
References
Title for footnote, http://www.itsupportguides.com