(Not sure where to post this.)
How do I create Footnote References and the Footnotes themselves using HTML and/or CSS?
I would like to mimic what you’d find in a “reference rich” website like Wikipedia.
Here is an example.
Thanks,
TomTees
If you want to mimic it:
Step one - you need link that have superscript (that number in brackets)
Step two - insert reference at the bottom of the page and add either anchors (old school) or ids to links so you can link from up to bottom.
Step three - Format references in the smaller text size and in columns as Wikipedia do.
Like was mentioned you would use something akin to SUP (for the superscript) and fragment identifiers. A crude example; <a href=“#item1”>xyz</a> points to whatever <p id=“#item1”>Some footnote</p> Though the ID values have to be unique.
You can use a wider range of HTML elements and attributes to improve your footnotes.
In the main section of the text, you give a link to the footnote, but include the contents of the footnote as a title, so it appears as a tooltip when people hover the mouse over the reference number, eg
<a href="#note1" id="ref1" title="Note how this title appears on hover">[1]</a>
Then at the end of the document/section, where you want the actual footnotes to be printed, you can write them as a definition list:
<dl>
<dt id="note1">[1]</dt>
<dd>Note how this title appears on hover (<a href="#ref1">Back to text</a>)</dd>
</dl>
The definition list is a semantically appropriate element, and the ref1 ID/link allows users to jump straight back to the point in the text where they left off.
Stevie D,
What if I need to refer to the same footnote several times in my article?
You mention using ID’s, but wouldn’t I need to used Classes?
For example…
Lorem ipsum dolor sit amet, consectetur adipiscing elit.[1] Donec orci metus, pretium vel adipiscing ac, bibendum et dolor. Donec sit amet elit ante, ac mollis velit. Aenean pharetra, enim quis suscipit aliquam, enim dui ullamcorper erat, non consequat mi eros nec ligula. Curabitur eu metus non eros facilisis dapibus vitae vel purus.[2] Suspendisse potenti. Donec auctor tellus in quam porta sed vulputate nibh luctus. Proin luctus, dolor at mollis pulvinar, nisi lorem pulvinar odio, id ullamcorper turpis leo malesuada diam. Nunc nec diam in nibh pharetra aliquet ac vitae enim.[1] Nullam ut mauris sit amet tellus eleifend pellentesque at nec turpis.
References:
[1] Suzy Q. “The CSS Revolution” CSS Today. May 15, 2010.
[2]Johnny B. Good. “How to create footnotes” HTML Coder. Oct 1, 2009.
TomTees
Correct.
Your ref. number links [1] should be just links, you only need a class (not an id) for styling them.
“and I wrote a paper<sup><a href=”#note1" class=“refs”>[1]</a></sup> on PF<sub>2</sub>NHPF<sub>4</sub> which was good."
Your link to Suzy’s well-known paper, should have an anchor with an id for the other links to jump to
Okay, so that was part of my confusion…
Each number in the paragraph (e.g. [1], [2], [1]) would be a hyperlink to the particular End-Note, right?
It isn’t a problem having two or more hyperlinks pint to the same End-Note?
Your link to Suzy’s well-known paper, should have an anchor with an id for the other links to jump to
Sorry, I don’t follow what you mean.
TomTees
The id value is the unique destination the fragment identifier beginning #whatever can occur several times upon the page:
For example:
<a href=“#item1”>Hello, Sailor</a>
<a href=“#item1”>Hello, Aviator</a>
<p id=“item1”>Some pointless Frobozz Electric footnote</p>
It still goes to the same place, i.e. id [FONT=Courier New]item1
[/FONT]I made a mistake on the post above #3; obviously it was supposed to read id=“item1” my fingers are stiff with the cold weather.
No
the target reference is given an anchor which has an id
<a id=“item1”>[1]</a>Suzy Q. “The CSS Revolution” CSS Today. May 15, 2010.
This is the target anchor <a id=“item1”>[1]</a> that your links will point to.
Just for clarity; destination anchors in HTML documents may be specified either by the A element or by any other element (naming with the id attribute).
Anyone else?
Is that true?
If so, I suppose it is a way to make your HTML “tighter”.
TomTees
Yes, it’s true. If you use the #id designation, it can be placed against any element containing that id. It works both in an inpage link or in a link to another page.
I’m not sure what’s in the specs for it, but logically it makes sense - I think people just used the old <a id=“x”> format purely out of force of habit or because no one ever told them differently.
Anyone else?
Is that true?
Is what true? Anchors with fragments in their hrefs go to the element whose id (or, earlier, name) == that fragement.
<a href=“#item1”>this link, when clicked, will take the user to whoever has the id of “item1”</a>
<someElement id=“item1”>In most browsers, clicking on the anchor will bring focus down here, IF the page is long enough to scroll.</someElement>
You won’t see any movement or scrolling if the destination isn’t far enough down; if it’s at the bottom of the page then the scrolling will only be enough to bring the destination onscreen.
Also there are browsers like Safari who will gladly move the visual focus to the destination, but not the keyboard focus (which makes sense, since in my example above, someElement is not a clickable element. It cannot receive keyboard focus anyway). So the keyboarding user who skips down to the footnote, if the footnote is not an anchor or something focusable, their next hit of the “TAB” key will go from wherever the last place their focus was… if their focus was near the top of the page, the next focus goes from there.
Since other browsers will start the next focus from where the visual focus is, I always use anchors for destinations. However most people don’t. Just an id is easier and less code.
It isn’t a problem having two or more hyperlinks pint to the same End-Note?
Nope. Just as it’s not a problem to have two hyperlinks to the same other page.
<a href=“http://wikipedia.org”>one link</a>
some text…
<a href=“http://wikipedia.org”>another link to the same place</a>
This is fine and legal. It’s also fine and legal if the href’s are to url fragments.
Here is my best first attempt at things…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2{
margin: 0;
padding: 0;
}
#wrapper{
width: 400px;
margin: 0 auto;
border: 1px solid #FFFFFF;
}
body{font: small/1.3em Verdana, Helvetica, Arial, sans-serif;}
h1{
margin: 1.3em 0 0.7em 0;
font-size: 1.3em;
}
ol{
line-height: 1.5em;
list-style-image: none;
list-style-type: none;
}
hr{margin: 20px 0 0 0;}
.reference{color: red;}
</style>
</head>
<body>
<div id="wrapper">
<h1>George Washington</h1>
<p>
On April 30, 1789, George Washington, standing on the balcony of Federal
Hall on Wall Street in New York, took his oath of office as the first
President of the United States. "As the first of every thing, in our
situation will serve to establish a Precedent," he wrote James Madison,
"it is devoutly wished on my part, that these precedents may be fixed
on true principles."
<sup id="cite_02">
<a href="#note_02" class="reference" title="See End-Note below...">[2]</a>
</sup>
</p>
<p>
Born in 1732 into a Virginia planter family, he learned the morals,
manners, and body of knowledge requisite for an 18th century Virginia
gentleman.
</p>
<p>
He pursued two intertwined interests: military arts and western
expansion. At 16 he helped survey Shenandoah lands for Thomas,
Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
the first skirmishes of what grew into the French and Indian War. The
next year, as an aide to Gen. Edward Braddock, he escaped injury
although four bullets ripped his coat and two horses were shot from
under him.
<sup id="cite_01">
<a href="#note_01" class="reference" title="See End-Note below...">[1]</a>
</sup>
</p>
<p>
From 1759 to the outbreak of the American Revolution, Washington
managed his lands around Mount Vernon and served in the Virginia House
of Burgesses. Married to a widow, Martha Dandridge Custis, he devoted
himself to a busy and happy life. But like his fellow planters,
Washington felt himself exploited by British merchants and hampered by
British regulations. As the quarrel with the mother country grew acute,
he moderately but firmly voiced his resistance to the restrictions.
</p>
<p>
When the Second Continental Congress assembled in Philadelphia in
May 1775, Washington, one of the Virginia delegates, was elected
Commander in Chief of the Continental Army. On July 3, 1775, at
Cambridge, Massachusetts, he took command of his ill-trained troops
and embarked upon a war that was to last six grueling years.
</p>
<p>
He realized early that the best strategy was to harass the British. He
reported to Congress, "we should on all Occasions avoid a general
Action, or put anything to the Risque, unless compelled by a necessity,
into which we ought never to be drawn."
<sup id="cite_05">
<a href="#note_05" class="reference" title="See End-Note below...">[5] </a>
</sup>
Ensuing battles saw him fall back slowly, then strike unexpectedly.
Finally in 1781 with the aid of French allies--he forced the surrender
of Cornwallis at Yorktown.
<sup id="cite_03">
<a href="#note_03" class="reference" title="See End-Note below...">[3] </a>
</sup>
</p>
<p>
Washington longed to retire to his fields at Mount Vernon. But he soon
realized that the Nation under its Articles of Confederation was not
functioning well, so he became a prime mover in the steps leading to
the Constitutional Convention at Philadelphia in 1787. When the new
Constitution was ratified, the Electoral College unanimously elected
Washington President.
<sup id="cite_04">
<a href="#note_04" class="reference" title="See End-Note below...">[4]</a>
</sup>
</p>
<p>
He did not infringe upon the policy making powers that he felt the
Constitution gave Congress. But the determination of foreign policy
became preponderantly a Presidential concern.
<sup id="cite_06">
<a href="#note_06" class="reference" title="See End-Note below...">[6] </a>
</sup>
When the French Revolution led to a major war between France and
England, Washington refused to accept entirely the recommendations
of either his Secretary of State Thomas Jefferson, who was pro-French,
or his Secretary of the Treasury Alexander Hamilton, who was
pro-British. Rather, he insisted upon a neutral course until the
United States could grow stronger.
</p>
<p>
To his disappointment, two parties were developing by the end of his
first term. Wearied of politics, feeling old, he retired at the end of
his second. In his Farewell Address, he urged his countrymen to
forswear excessive party spirit and geographical distinctions. In
foreign affairs, he warned against long-term alliances.
</p>
<p>
Washington enjoyed less than three years of retirement at Mount Vernon,
for he died of a throat infection December 14, 1799. For months the
Nation mourned him.
</p>
<hr>
<b>ENDNOTES:</b>
<ol>
<li id="note_01">
<b><a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a></b>
Richard Brookhiser. "Founding Father: Rediscovering George Washington" pg 103.
</li>
<li id="note_02">
<b><a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a></b>
Daniel C. Gedacht.
<a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73">
"George Washington: Leader of a New Nation"</a>
The Rosen Publishing Group. (1999). Retrieved August 26, 2010.
</li>
<li id="note_03">
<b><a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a></b>
Andrew Cayton. "Learning to Be Washington," New York Times Sept. 30, 2010
</li>
<li id="note_04">
<b><a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a></b>
Marcus Cunliffe, George Washington: Man and Monument (1958) pg 24-26
</li>
<li id="note_05">
<b><a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a></b>
John Randall. "George Washington: A Life" (1998) pg 8,11
</li>
<li id="note_06">
<b><a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a></b>
Mary Ellis. "His Excellency: George Washington" (2004) pg 8
</li>
</ol>
</div>
</body>
</html>
I’m pretty happy with the look and feel.
What do you think?
TomTees
Just be sure your footnotes are in order (you’ve got 2, 1, 5, 4 3, 6)
You mean the Citations?
If so, I agree they would normally start off [1], [2],… but if one End-Note is used in multiple places then the Citations won’t be sequential. (One End-Note can have many Citations - kind of like “keys” in a database.)
TomTees
That looks good for a first attempt 
A couple of things I would change are as follows:
<b>ENDNOTES:</b>
<ol>
The b element should be a heading element of a suitable level because a) it is a heading and b) it needs to be a block level element in that position to be semantically correct. You should avoid running inline elements into block elements (even though it is valid) as it makes the browsers construct an anonymous block box and as I said is not semantically correct either (although lots of people do this).
In the following you have a b element around the anchor and as the b element is presentational only then you could remove it and apply bold to the anchors class instead (.reference).
[B]<b>[/B]<a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a>[B]</b>[/B]
If you wanted the element to be stronger (semantically) then use strong instead of b. However, it seems that you just want a visual effect so I would style the anchor directly.
Lastly, I would apply some styles to the sup element to get it more consistent and to reduce the gap that appears between lines which looks messy.
Something roughly like this.
sup {
vertical-align: super;
font-size: smaller;
line-height:1;
}
Thanks Paul. (I always strive to make you proud of me!) 
Here is my updated code. (I tried to incorporate all of your suggestions.)
Please let me know what you think…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2{
margin: 0;
padding: 0;
}
body{font: small/1.3em Verdana, Helvetica, Arial, sans-serif;}
#wrapper{
width: 400px;
margin: 0 auto;
border: 1px solid #FFFFFF;
}
h1{
margin: 1.3em 0 0.7em 0;
font-size: 1.3em;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: 0.9;
}
.reference{color: red;}
hr{margin: 20px 0 0 0;}
#endnotes{margin: 0 0 0 20px;}
#endnotes h2{
margin: 0.5em 0 -0.7em 0;
font-size: 1em;
}
#endnotes ul{
line-height: 1.3em;
list-style-type: none;
font-size: 0.8em;
}
#endnotes ul>li{margin: 0.5em 0 0 -3.8em;}
#endnotes li a{font-weight: 300;}
</style>
</head>
<body>
<div id="wrapper">
<h1>George Washington</h1>
<p>
On April 30, 1789, George Washington, standing on the balcony of Federal
Hall on Wall Street in New York, took his oath of office as the first
President of the United States. "As the first of every thing, in our
situation will serve to establish a Precedent," he wrote James Madison,
"it is devoutly wished on my part, that these precedents may be fixed
on true principles."
<sup id="cite_01">
<a href="#note_01" class="reference" title="See End-Note below...">[1]</a>
</sup>
</p>
<p>
Born in 1732 into a Virginia planter family, he learned the morals,
manners, and body of knowledge requisite for an 18th century Virginia
gentleman.
<sup id="cite_02">
<a href="#note_02" class="reference" title="See End-Note below...">[2]</a>
</sup>
</p>
<p>
He pursued two intertwined interests: military arts and western
expansion. At 16 he helped survey Shenandoah lands for Thomas,
Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
the first skirmishes of what grew into the French and Indian War. The
next year, as an aide to Gen. Edward Braddock, he escaped injury
although four bullets ripped his coat and two horses were shot from
under him.
<sup id="cite_03">
<a href="#note_03" class="reference" title="See End-Note below...">[3]</a>
</sup>
</p>
<p>
From 1759 to the outbreak of the American Revolution, Washington
managed his lands around Mount Vernon and served in the Virginia House
of Burgesses.
<sup id="cite_01">
<a href="#note_01" class="reference" title="See End-Note below...">[1]</a>
</sup>
Married to a widow, Martha Dandridge Custis, he devoted
himself to a busy and happy life. But like his fellow planters,
Washington felt himself exploited by British merchants and hampered by
British regulations. As the quarrel with the mother country grew acute,
he moderately but firmly voiced his resistance to the restrictions.
</p>
<p>
When the Second Continental Congress assembled in Philadelphia in
May 1775, Washington, one of the Virginia delegates, was elected
Commander in Chief of the Continental Army. On July 3, 1775, at
Cambridge, Massachusetts, he took command of his ill-trained troops
and embarked upon a war that was to last six grueling years.
</p>
<p>
He realized early that the best strategy was to harass the British. He
reported to Congress, "we should on all Occasions avoid a general
Action, or put anything to the Risque, unless compelled by a necessity,
into which we ought never to be drawn."
<sup id="cite_04">
<a href="#note_04" class="reference" title="See End-Note below...">[4]</a>
</sup>
Ensuing battles saw him fall back slowly, then strike unexpectedly.
Finally in 1781 with the aid of French allies--he forced the surrender
of Cornwallis at Yorktown.
<sup id="cite_05">
<a href="#note_05" class="reference" title="See End-Note below...">[5]</a>
</sup>
</p>
<p>
Washington longed to retire to his fields at Mount Vernon. But he soon
realized that the Nation under its Articles of Confederation was not
functioning well, so he became a prime mover in the steps leading to
the Constitutional Convention at Philadelphia in 1787. When the new
Constitution was ratified, the Electoral College unanimously elected
Washington President.
<sup id="cite_02">
<a href="#note_02" class="reference" title="See End-Note below...">[2]</a>
</sup>
</p>
<p>
He did not infringe upon the policy making powers that he felt the
Constitution gave Congress. But the determination of foreign policy
became preponderantly a Presidential concern.
<sup id="cite_06">
<a href="#note_06" class="reference" title="See End-Note below...">[6]</a>
</sup>
When the French Revolution led to a major war between France and
England, Washington refused to accept entirely the recommendations
of either his Secretary of State Thomas Jefferson, who was pro-French,
or his Secretary of the Treasury Alexander Hamilton, who was
pro-British. Rather, he insisted upon a neutral course until the
United States could grow stronger.
</p>
<p>
To his disappointment, two parties were developing by the end of his
first term. Wearied of politics, feeling old, he retired at the end of
his second. In his Farewell Address, he urged his countrymen to
forswear excessive party spirit and geographical distinctions. In
foreign affairs, he warned against long-term alliances.
</p>
<p>
Washington enjoyed less than three years of retirement at Mount Vernon,
for he died of a throat infection December 14, 1799. For months the
Nation mourned him.
</p>
<hr>
<div id="endnotes">
<h2>ENDNOTES:</h2>
<ul>
<li id="note_01">
<a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a>
Richard Brookhiser. "Founding Father: Rediscovering George Washington" pg 103.
</li>
<li id="note_02">
<a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a>
Daniel C. Gedacht.
<a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73">
"George Washington: Leader of a New Nation"</a>
The Rosen Publishing Group. (1999). Retrieved August 26, 2010.
</li>
<li id="note_03">
<a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a>
Andrew Cayton. "Learning to Be Washington," New York Times Sept. 30, 2010
</li>
<li id="note_04">
<a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a>
Marcus Cunliffe, George Washington: Man and Monument (1958) pg 24-26
</li>
<li id="note_05">
<a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a>
John Randall. "George Washington: A Life" (1998) pg 8,11
</li>
<li id="note_06">
<a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a>
Mary Ellis. "His Excellency: George Washington" (2004) pg 8
</li>
</ul>
</div>
</div>
</body>
</html>
I also took DaveMaxwell’s advice about the order of my Citations in the body text!
TomTees
Yes that looks better.
There are two errors where you have the ampersand in the url. Add amp; to the ampersand.
I don’t know if this is suitable but for modern browsers you could highlight the destination using :target.
e.g.
#wrapper :target{background:#ffc}
Footnotes seem to be one of the few defensible uses of pop-ups, or perhaps text boxes triggered on hover. The footnote is a print convention that shoves the info at the bottom of the page because book editors don’t have many options to deal with such things (the idea of a 3D pop-up footnote like a kid’s book tickles me; that would add an element of whimsy to some of those dense, footnote-laden texts I have left over from college). To my mind, footnotes are a print-based convention that we can solve with a different, and better, approach But that’s my opinion, your mileage may vary.