How do I create a link to a footnote in HTML?
It's good practice to provide a link back from the footnote to where it is referenced (assuming there's a 1:1 relationship). This is useful because the back button will take the user back to scroll position they were at previously, leaving the reader to find their place in the text. Clicking on a link back to where the footnote was referenced in the text puts that text at the top of the window, making it very easy for the reader to pick up where they left off .
Quirksmode has a page on footnotes on the web (although it suggests you use sidenotes instead of footnotes I think that footnotes are more accessible, with a link to the footnote and the footnote followed by a link back to the text I suspect they would be easier to follow with a screen reader).
One of the links from the quirksmode page suggests having an arrow, ↩, after the text of the footnote linking back, and to use entity ↩ for this.
e.g.:
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote. <a href="#footnote-1-ref">↩</a>
</p>
<p id="footnote-2">
2. Another footnote. <a href="#footnote-2-ref">↩</a>
</p>
I'm not sure how screen readers would handle the entity though. Linked to from the comments of Grubber's post is Bob Eastern's post on the accessibility of footnotes which suggests it isn't read, although that was a number of years ago and I'd hope screen readers would have improved by now. For accessibility it might be worth using a text anchor such as "return to text" or perhaps putting it in the title attribute of the link. It may also be worth putting one on the original footnote although I don't know how screen readers would handle that.
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote.
<a href="#footnote-1-ref" title="return to text">↩</a>
</p>
<p id="footnote-2">
2. Another footnote.
<a href="#footnote-2-ref" title="return to text">↩</a>
</p>
(I'm only guessing on the accessibility issues here, but since it wasn't raised in any of the articles I mentioned I thought it was worth bringing up. If anyone can speak with more authority on the issue I'd be interested to hear.)
Give a container an id, then use # to refer to that Id.
e.g.
<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>
<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>First you go in and put an anchor tag with a name attribute in front of each footnote.
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
This anchor tag will not be a link. It will just be a named section of the page. Then you make the footnote marker a tag that refers to that named section. To refer to a named section of a page you use the # sign.
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
If you want to link into that section from another page, you can do that too. Just link the page and tack the section name onto it.
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
You will need to setup anchor tags for all of your footnotes. Prefixing them with something like this should do it:
< a name="FOOTNOTE-1">[ 1 ]< /a>
Then in the body of your page, link to the footnote like this:
< a href="#FOOTNOTE-1">[ 1 ]< /a>
(note the use of the name vs the href attributes)
Essentially, any time you set a name of an A tag, you can then access it by linking to #NAME-USED-IN-TAG.
http://www.w3schools.com/HTML/html_links.asp has more information.