Footnotes in HTML?

Question from Nikki:  I am used to creating footnotes in documents using Windows Word.  It is so easy.  How do you do the same thing on a web page using Notepad?

Three tags will be most useful here. 

  1. a font formatting tag for superscript which raises a character (this is for your numbered note)
  2. your a name href for anchoring the footnote so that when your numbered note is clicked the viewer is brought to the bottom of the page where you have the note
  3. your a href tag.

At the end of the phrase or the sentence where you place the footnote reference, surround the number with the <sup> tag, like so:

<sup>1</sup>

and then add your A HREF tag in the following manner:

<sup><a href=”#note1”>1</a></sup>

At the bottom of the page, right after a heading called “Footnotes” or “Notes”, type the note that is going to be referenced like this

<p><a name=”note1”>1.</a>  Some note here.</p>

Notice the difference between the A HREF tag and the A NAME tag.  The difference is this symbol #.  This should only appear in the A HREF, not in the A NAME.  The symbol means that there is a section in the webpage called “note1” to which the browser must go.

After the note, you’d wish your viewer to go back to the place where he left.  At the end of the note, add the following:

<a href=”javascript:history.go(-1)”>[top]</a>

That is a simple javascript A HREF that lets your viewer go back one step.

If you will be using a framed page so that the viewer need not go up and down your page, put your footnotes in a page called (for example) footnotes.html.  The reference would then look this way:

<sup><a href=”footnotes.html#note1” target=”yourframesname”>1</a></sup>

The A HREF specification tells the browser that there is a section called “note1” in footnotes.html that should be brought up to the viewer in the frame specified.  Be sure to create a valid framed page for this to work.

This entry was posted on Tuesday, May 13th, 2008 at 4:15 pm and is filed under HTML-Related. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.