How do I create a link to a footnote in HTML?

Question

For example:

This is main body of my content. I have a footnote link for this line [1]. Then, I have some more content. Some of it is interesting and it has some footnotes as well [2].

[1] Here is my first footnote.

[2] Another footnote.

So, if I click on the "[1]" link it directs the web page to the first footnote reference and so on. How exactly do I accomplish this in HTML?

Answer 1

anchor tags using named anchors

http://www.w3schools.com/HTML/html_links.asp

Answer 2

Give a container an id, then use # to refer to that Id.

e.g.

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 id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>

Answer 3

Use bookmarks in anchor tags...

    This is main body of my content. I have a footnote link for this 
line <a href="#foot1">[1]</a>. Then, I have some more content. 
Some of it is interesting and it has some footnotes as well 
<a href="#foot2">[2]</a>.

<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>

<div>
<a name="foot2">[2]</a> Another footnote.
</div>

Answer 4

This is main body of my content. I have a footnote link for this line [1]. Then, I have some more content. Some of it is interesting and it has some footnotes as well [2].

[1] Here is my first footnote.

[2] Another footnote.

---

Do < a href=#tag> text < /a>

and then at the footnote: < a name="tag"> text < /a>

All without spaces. Reference: http://www.w3schools.com/HTML/html_links.asp

Answer 5

<a name="1">Footnote</a>

bla bla

<a href="#1">go</a> to footnote.

Answer 6

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>

Answer 7

You could also view the source of a Wikipedia page.

Here is a code snip from the first citation:

<sup id="cite_ref-fortran1_0-0" class="reference"><a href="#cite_note-fortran1-0" title="">[1]</a></sup> "

And here is what it links to:

<a href="#cite_ref-fortran1_0-0" title="">^</a>

Answer 8

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.

Answer 9

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 &#8617; 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">&#8617</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617</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">&#8617</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617</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.)

Answer 10

For your case, you're probably best off doing this with a-href tags and a-name tags in your links and footers, respectively.

In the general case of scrolling to a DOM element, there is a jQuery plugin. But if performance is an issue, I would suggest doing it manually. This involves two steps:

1. Finding the position of the element you are scrolling to.
2. Scrolling to that position.

quirksmode gives a good explanation of the mechanism behind the former. Here's my preferred solution:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

It uses casting from null to 0, which isn't proper etiquette in some circles, but I like it :) The second part uses window.scroll. So the rest of the solution is:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!