<p>For example:</p>

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

<p>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?</p>

[{'answer_id': 66977, 'author': 'Mike Becatti', 'author_id': 6617, 'author_profile': 'https://Stackoverflow.com/users/6617', 'pm_score': 0, 'selected': False, 'text': '<p>anchor tags using named anchors</p>\n\n<p><a href="http://www.w3schools.com/HTML/html_links.asp" rel="nofollow noreferrer">http://www.w3schools.com/HTML/html_links.asp</a></p>\n'}, {'answer_id': 66983, 'author': 'Peter Boughton', 'author_id': 9360, 'author_profile': 'https://Stackoverflow.com/users/9360', 'pm_score': 7, 'selected': True, 'text': '<p>Give a container an id, then use <code>#</code> to refer to that Id.</p>\n\n<p>e.g.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This is main body of my content. I have a footnote link for this line &lt;a href="#footnote-1"&gt;[1]&lt;/a&gt;. Then, I have some more content. Some of it is interesting and it has some footnotes as well &lt;a href="#footnote-2"&gt;[2]&lt;/a&gt;.&lt;/p&gt;\r\n\r\n&lt;p id="footnote-1"&gt;[1] Here is my first footnote.&lt;/p&gt;\r\n&lt;p id="footnote-2"&gt;[2] Another footnote.&lt;/p&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 66990, 'author': 'Paul Dixon', 'author_id': 6521, 'author_profile': 'https://Stackoverflow.com/users/6521', 'pm_score': 0, 'selected': False, 'text': '<p>Use bookmarks in anchor tags...</p>\n\n<pre><code>    This is main body of my content. I have a footnote link for this \nline &lt;a href="#foot1"&gt;[1]&lt;/a&gt;. Then, I have some more content. \nSome of it is interesting and it has some footnotes as well \n&lt;a href="#foot2"&gt;[2]&lt;/a&gt;.\n\n&lt;div&gt;\n&lt;a name="foot1"&gt;[1]&lt;/a&gt; Here is my first footnote.\n&lt;/div&gt;\n\n&lt;div&gt;\n&lt;a name="foot2"&gt;[2]&lt;/a&gt; Another footnote.\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 66993, 'author': 'zxcv', 'author_id': 9628, 'author_profile': 'https://Stackoverflow.com/users/9628', 'pm_score': 0, 'selected': False, 'text': '<p>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].</p>\n\n<p>[1] Here is my first footnote.</p>\n\n<p>[2] Another footnote.</p>\n\n<hr>\n\n<p>Do &lt; a href=#tag> text &lt; /a></p>\n\n<p>and then at the footnote: &lt; a name="tag"> text &lt; /a> </p>\n\n<p>All without spaces.  Reference: <a href="http://www.w3schools.com/HTML/html_links.asp" rel="nofollow noreferrer">http://www.w3schools.com/HTML/html_links.asp</a></p>\n'}, {'answer_id': 66997, 'author': 'Sklivvz', 'author_id': 7028, 'author_profile': 'https://Stackoverflow.com/users/7028', 'pm_score': 0, 'selected': False, 'text': '<p>&lt;a name="1"&gt;Footnote&lt;/a&gt;</p>\n\n<p>bla bla</p>\n\n<p>&lt;a href="#1"&gt;go&lt;/a&gt; to footnote.</p>\n'}, {'answer_id': 67014, 'author': 'Adrian Dunston', 'author_id': 8344, 'author_profile': 'https://Stackoverflow.com/users/8344', 'pm_score': 2, 'selected': False, 'text': '<p>First you go in and put an anchor tag with a name attribute in front of each footnote.</p>\n\n<pre><code> &lt;a name="footnote1"&gt;Footnote 1&lt;/a&gt;\n &lt;div&gt;blah blah about stuff&lt;/div&gt;\n</code></pre>\n\n<p>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>\n\n<pre><code> &lt;p&gt;So you can see that the candidate lied \n &lt;a href="#footnote1"&gt;[1]&lt;/a&gt; \n in his opening address&lt;/p&gt;\n</code></pre>\n\n<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>\n\n<pre><code> &lt;p&gt;For more on that, see \n &lt;a href="mypaper.html#footnote1"&gt;footnote 1 from my paper&lt;/a&gt;\n , and you will be amazed.&lt;/p&gt;\n</code></pre>\n'}, {'answer_id': 67035, 'author': 'Scott Swezey', 'author_id': 9439, 'author_profile': 'https://Stackoverflow.com/users/9439', 'pm_score': 1, 'selected': False, 'text': '<p>You will need to setup anchor tags for all of your footnotes. Prefixing them with something like this should do it:<br />\n    &lt; a name="FOOTNOTE-1">[ 1 ]&lt; /a></p>\n\n<p>Then in the body of your page, link to the footnote like this:<br />\n    &lt; a href="#FOOTNOTE-1">[ 1 ]&lt; /a>\n<br />(note the use of the <strong>name</strong> vs the <strong>href</strong> attributes)</p>\n\n<p>Essentially, any time you set a name of an A tag, you can then access it by linking to #NAME-USED-IN-TAG.</p>\n\n<p><br />\n<a href="http://www.w3schools.com/HTML/html_links.asp" rel="nofollow noreferrer">http://www.w3schools.com/HTML/html_links.asp</a> has more information.</p>\n'}, {'answer_id': 68080, 'author': 'Sam Hasler', 'author_id': 2541, 'author_profile': 'https://Stackoverflow.com/users/2541', 'pm_score': 4, 'selected': False, 'text': '<p>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 . </p>\n\n<p>Quirksmode has a page on <a href="http://www.quirksmode.org/blog/archives/2005/07/footnotes_on_th.html" rel="noreferrer">footnotes on the web</a> (although it suggests you use <a href="http://andreas.web-graphics.com/footnotes/" rel="noreferrer">sidenotes</a> instead of footnotes I think that footnotes are more <strong>accessible</strong>, 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 <strong>screen reader</strong>).</p>\n\n<p>One of the links from the quirksmode page suggests having an arrow, &#8617;, after the text of the footnote linking back, and to use entity &amp;#8617; for this.</p>\n\n<p>e.g.:</p>\n\n<pre><code>This is main body of my content.\nI have a footnote link for this line\n&lt;a id="footnote-1-ref" href="#footnote-1"&gt;[1]&lt;/a&gt;.\nThen, I have some more content.\nSome of it is interesting and it has some footnotes as well\n&lt;a id="footnote-2-ref" href="#footnote-2"&gt;[2]&lt;/a&gt;.\n\n&lt;p id="footnote-1"&gt;\n   1. Here is my first footnote. &lt;a href="#footnote-1-ref"&gt;&amp;#8617;&lt;/a&gt; \n&lt;/p&gt;\n&lt;p id="footnote-2"&gt;\n   2. Another footnote. &lt;a href="#footnote-2-ref"&gt;&amp;#8617;&lt;/a&gt;\n&lt;/p&gt;\n</code></pre>\n\n<p>I\'m not sure how screen readers would handle the entity though. Linked to from the comments of Grubber\'s post is <a href="http://www.clagnut.com/blog/1528/" rel="noreferrer">Bob Eastern\'s post on the accessibility of footnotes</a> 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.</p>\n\n<pre><code>This is main body of my content.\nI have a footnote link for this line\n&lt;a id="footnote-1-ref" href="#footnote-1" title="link to footnote"&gt;[1]&lt;/a&gt;.\nThen, I have some more content.\nSome of it is interesting and it has some footnotes as well\n&lt;a id="footnote-2-ref" href="#footnote-2" title="link to footnote"&gt;[2]&lt;/a&gt;.\n\n&lt;p id="footnote-1"&gt;\n   1. Here is my first footnote.\n      &lt;a href="#footnote-1-ref" title="return to text"&gt;&amp;#8617;&lt;/a&gt; \n&lt;/p&gt;\n&lt;p id="footnote-2"&gt;\n   2. Another footnote.\n      &lt;a href="#footnote-2-ref" title="return to text"&gt;&amp;#8617;&lt;/a&gt;\n&lt;/p&gt;\n</code></pre>\n\n<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.)</p>\n'}, {'answer_id': 69127, 'author': 'Andrey Fedorov', 'author_id': 10728, 'author_profile': 'https://Stackoverflow.com/users/10728', 'pm_score': 1, 'selected': False, 'text': '<p>For your case, you\'re probably best off doing this with a-href tags and a-name tags in your links and footers, respectively.</p>\n\n<p>In the general case of scrolling to a DOM element, there is a <a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow noreferrer">jQuery plugin</a>. But if performance is an issue, I would suggest doing it manually. This involves two steps:</p>\n\n<ol>\n<li>Finding the position of the element you are scrolling to.</li>\n<li>Scrolling to that position.</li>\n</ol>\n\n<p><a href="http://www.quirksmode.org/js/findpos.html" rel="nofollow noreferrer">quirksmode</a> gives a good explanation of the mechanism behind the former. Here\'s my preferred solution:</p>\n\n<pre><code>function absoluteOffset(elem) {\n    return elem.offsetParent &amp;&amp; elem.offsetTop + absoluteOffset(elem.offsetParent);\n}\n</code></pre>\n\n<p>It uses casting from null to 0, which isn\'t proper etiquette in some circles, but I like it :) The second part uses <code>window.scroll</code>. So the rest of the solution is:</p>\n\n<pre><code>function scrollToElement(elem) {\n    window.scroll(absoluteOffset(elem));\n}\n</code></pre>\n\n<p>Voila!</p>\n'}, {'answer_id': 38296077, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>The answer of Peter Boughton is good, but it could be better if instead of declaring the footnote as "p" (paragraph), you declared as "li" (list-item) inside a "ol" (ordered-list):</p>\n\n<pre><code>This is main body of my content. I have a footnote link for this line &lt;a href="#footnote-1"&gt;[1]&lt;/a&gt;. Then, I have some more content. Some of it is interesting and it has some footnotes as well &lt;a href="#footnote-2"&gt;[2]&lt;/a&gt;.\n\n&lt;h2&gt;References&lt;/h2&gt;\n&lt;ol&gt;\n    &lt;li id="footnote-1"&gt;Here is my first footnote.&lt;/li&gt;\n    &lt;li id="footnote-2"&gt;Another footnote.&lt;/li&gt;\n&lt;/ol&gt;\n</code></pre>\n\n<p>This way, it\'s not needed to write the number on top, and below... as long as the references are listed on the right order below.</p>\n'}]
['https://Stackoverflow.com/questions/66964', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4872/']