Creating Footnotes

Earlier you used the BLOCKQUOTE element to format a block quote, which included a quote from a book on eggs. The example text included a note number in parentheses at the end of the block quote and a footnote at the bottom of the page. In this section, you will be superscripting the note number and creating a link that jumps from the note number to the footnote at the bottom of the page.

Superscripting Note Numbers

The SUP (Superscript) and SUB (Subscript) elements are inline elements that superscript or subscript nested content. A common use of the SUP element is the presentation of superscripted note characters, which can be linked to footnotes at the bottom of a page or endnotes on a separate page. A note character (the number "1"), bracketed by parentheses, is included at the end of the block quote you just formatted. Use the SUP element to superscript it (see Figure 3.20):

As I savored the rich yolk and salty butter dripping from the
toast, Mom let me dawdle and daydream, a rare luxury reserved
for weekend mornings.<sup>(1)</sup></p>
</blockquote>

Figure 3.20: The SUP element superscripts nested content.

You will notice that the superscripted note number is bracketed by parentheses. The reason for this is that some earlier browsers do not support the SUP element and will display nested content as unsuperscripted. Thus what is displayed as text¹ in current browsers may be displayed as text1 in some earlier browsers. By including the parentheses, however, earlier browsers will display the effected text as text(1), which more clearly indicates the number is a note number and not simply part of the text.

Creating a Footnote Link

One of the advantages of publishing a document on the Web is that you can link note numbers to their corresponding footnotes at the bottom of the page. An example footnote is already included at the bottom of the example page. Format it as a link and insert a destination anchor to mark the spot:

<p><strong>Note:</strong></p>

<p><a name="foot1"></a><sup>1</sup> <em>The Good Egg: More
Than 200 Fresh Approaches from Soup to Dessert</em> by
Marie Simmons, published by Houghton Mifflin Co., May
2000.</p>

Return to the note number and set it up as a link that jumps to the corresponding footnote at the bottom of the page (see Figure 3.21):

<p>I'd peel away the flakes of shell carefully (the outside
of the egg was very hot), finally exposing the
shimmering white, then, with the spoon, break through to
the molten yolk within. At last, putting down the spoon,
I'd reach for the toast fingers and start dipping. As I
savored the rich yolk and salty butter dripping from the
toast, Mom let me dawdle and daydream, a rare luxury
reserved for weekend mornings.<a href="#foot1">
<sup>(1)</sup></a></p>

Figure 3.21: The note number is turned into a link that jumps to a footnote at the bottom of the page.

Click on the link to test it. The footnote at the bottom of the page should be displayed at the top of the browser window's viewport (see Figure 3.22).

Figure 3.22: When jumped to from a note link, the footnote is displayed at the top of the browser's viewport.

Note

Displaying the footnote at the top of the browser's viewport is enabled by inserting a PRE element at the bottom of the page that contains hard returns that extend the content at the bottom of the page. Using the PRE element is covered later in this session.

Creating a Footnote Separator

It is common in printed publications to separate footnotes from the body of the page by using a short horizontal rule only extending part way from the left margin. Add a customized HR element that serves as a footnote separator (see Figure 3.23):

<p><hr align="left" width="150" size="1" noshade><strong>
Notes:</strong></p>

<p><a name="foot1"></a><sup>1</sup> <em>The Good Egg: More
Than 200 Fresh Approaches from Soup to Dessert</em> by Marie
Simmons, published by Houghton Mifflin Co., May 2000.</p>

Figure 3.23: A customized HR element creates a footnote separator line.

The HR element is centered by default when set to a width of less than 100 percent. In this case, the WIDTH attribute sets the width of the rule to 150 pixels, while the ALIGN attribute specifies that the rule is aligned with the left margin. The SIZE attribute sets the height of the rule to 1 pixel (displayed by default at 2 pixels in most browsers). The NOSHADE rule specifies that the rule should be rendered in a single shade (gray or black, depending on the browser), instead of being displayed in white, with a gray shade below and to the right to provide contrast with the surrounding page background.

The positioning of the HR element inside of a P element is non-standard, but is the only way to achieve the effect shown using straight HTML. If positioned prior to the P element, significantly more vertical space separates the footnote separator from the following "Notes:" line than would be the case in a printed document. Although current browsers do not care if an HR element is nested inside of a P element, it will cause an error to be reported if you seek to validate the page's HTML using the W3C's HTML Validator—an HR element, according to the HTML 4.01 specification, should not be nested inside of a P element. To achieve a similar result using only valid code requires the use of a style to reduce the paragraph's top margin, such as shown here:

<hr align="left" width="150" size="1" noshade>
<p style="margin-top: -3px"><strong>Notes:</strong></p>

You will learn about using styles in Web pages in the Sunday Afternoon session, "Working with Styles."

Tip

The SUB (Subscript) element works similarly to the SUP element, except it subscripts nested text. For instance, the following subscripts the number 2 in the chemical symbol for water (H₍₂₎O):

H<sub>(2)</sub>O

As when using the SUP element, notice that the subscripted "2" character is inserted in parentheses to allow for early browsers that do not support the SUB element.