There are some simple ways to make footnotes in your web page or blog post that allow for easy user navigation and super-swell formatting.

Here, we are going to use two types of tag: the internal anchor tag, and the superscript tag with in-line style attributes.

The internal anchor tag is what we will use to link the superscripted number to the footnoted text. It goes like this:

...however, in the Nixon [1] case, a simple "Checkers" speech would not suffice.

If you click on the number "1", you will be taken to the citation below. And if you click on the citation below, you will be brought back to the footnote reference above.

This is accomplished with reciprocal internal anchor tags. The source looks like this:

For the reference:
For the citation:
Notice how the "href" on [1] matches the "name" on the citation. Thus, href="#footnote1" takes you to name="footnote1".

And here comes the reciprocity part: the "href" on the citation matches the "name" on the [1]. Thus, href="#cite1" takes you to name="cite1".

The formula is as follows:



As you keep adding footnotes, increment the hrefs and names by one, so that the subsequent footnote, "cite2" should reciprocate "footnote2".

Some folks may find the hyperlinked citation text confusing, so you can put a "Return to article" link after the cite like this.

Let us now turn toward making the [1] look more like ¹ by using the <sup> tag and in-line style directives.

The in-line style directive is for people like me who do not feel like writing a cascading stylesheet (CSS) file to cover every possible representation of text that they may want to use. It is usually for "seat of the pants" formatting. In a way, it defeats the purpose of CSS, which was mostly to avoid declaring lame <font> tags every time you had some text to format. However, for our purposes, it will work quite nicely.

In-line styles tcan be embedded in pretty much any other type of tag, and it serves as a property with nested property/value sets. You do not need to understand that last sentence. What you do need to understand, however, is that we are going to use this tag to make our superscripts look right.

Let's now replace the brackets around the number "1" with the following:

This gives the result of a supersript such as this³. The font size is diminished to 10px (assuming your normal text is 12px), and the line height reduced to zero, in order to minimize the spacing issues that are often created when using superscripts in html.

You may want to do something like get rid of the underline on the footnote reference, or change the color of the hyperlinked text. Perhaps you want to give it a mouseover effect. This can all be acieved with a stylesheet, or with in-line CSS as described above. There are many resources to using css on the web. A recently well-written one is located here. If, for some reason, clicking on the links doesn't take you to different points in this entry, it may be because you have a large monitor running at high resolution. Try reducing your browser window until it only displays a dozen lines or so, and then click on the hyperlinks. Since many articles are both lengthy and rife with footnotes, the effect will be more dramatic -- and of greater utility.



¹United States v. Nixon, 418 U.S. 683 (1974)

²United States v. Nixon, 418 U.S. 683 (1974) Return to article

³United States v. Nixon, 418 U.S. 683 (1974) Posted by justin at December 4, 2003 09:30 AM