John's Blog

home info

HTML Footnotes - Use footnotes in html

Footnotes are a nice way to include detail without interrupting the flow of a page. If the user desires, they may click on the footnote or wait until later. HTML can perform this quite easily. Let's use an example.

This is the footnote reference (call):

There is a lot of information at the Google website.1

The code for this is: 

There is a lot of information at the Google website.
<a href="#fn1" id="ref1"><sup>1</sup></a>

Notice that the href uses the "#" - which refers to a spot on this page with an ID of "fn1".

I will insert a bunch of lines - to push the footnote "off the bottom" of the page.

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

-- space holder --

1. Google  page.

The code for the footnote itself is:

1. <a href="http://google.com" id="fn1"  target="_blank">Google</a> page. </span>
   <a href="#ref1" style="text-decoration-line: none; font-size: x-large;"
   title="back to text">&larr;</a>

Note that the arrow is a link to return to the footnote reference - a nice optional touch.

Author: JMP (Saturday 24th of July 2021 05:16:18 AM)




News

More simplification of the blog - enjoy!