HTML Example of Correctly Formatted Footnotes

This page contains an example of how footnotes should be configured on Harvey Mudd College website. Visit the Footnotes How-To page for step-by-step instructions.

Some Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.1 Quisque diam enim, vulputate interdum felis sed, sollicitudin scelerisque nisl. Donec eu odio eros. Proin eu cursus purus. Phasellus efficitur fringilla dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus volutpat sem eleifend, lobortis ipsum at, congue enim.2

Cras eget sapien et ipsum faucibus accumsan nec vel massa. Proin sollicitudin sem sed hendrerit consectetur.3

Footnotes

  1. This is the text of the first footnote ↵
  2. This is the text of the second footnote ↵
  3. This is the text of the third footnote ↵
Footnotes Example Code Snippet
<h2>Some Content</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a id="fn-1-ref " href="#fn-1"><sup>1</sup></a> Quisque diam enim, vulputate interdum felis sed, sollicitudin scelerisque nisl. Donec eu odio eros. Proin eu cursus purus. Phasellus efficitur fringilla dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus volutpat sem eleifend, lobortis ipsum at, congue enim.<a id="fn-2-ref" href="#fn-2"><sup>2</sup></a></p>
  <p>Cras eget sapien et ipsum faucibus accumsan nec vel massa. Proin sollicitudin sem sed hendrerit consectetur.<a id="fn-3-ref" href="#fn-3"><sup>3</sup></a></p>
<h2>Footnotes</h2>
 <ul>  
   <li id="fn-1">This is the text of the first footnote <a href="#fn-1-ref" aria-label="Return to footnote 1 referring content.">↵</a></li>
   <li id="fn-2">This is the text of the second footnote <a href="#fn-2-ref" aria-label="Return to footnote 2 referring content.">↵</a></li>
   <li id="fn-3">This is the text of the third footnote <a href="#fn-3-ref" aria-label="Return to footnote 3 referring content.">↵</a></li>
</ul>