There are times when the use of footnotes/endnotes are useful in a LibGuides. Following Library of Congress P1 guidelines and styles, the information on this page provides guidance on the formatting and presentation of notes in research guides. This page provides details of how to encode the individual notes using HTML and CSS, and how to code them at the end of the page where the notes have appeared in the text. However, we do not prescribe the format of the content of the notes themselves.
The footnote number should be coded with the superscript <sup> as the outer tag and the anchor tag <a> as the inner tag. Use the CSS class footnote-number in the opening superscript tag:
<sup class="footnote-number">
In the anchor tag, you will need to link to the note (which will be done in endnote style at the bottom of the page) using an internal anchor link -- href=#note1" and create a target to the return location in the text where your footnote was created -- id="note_1
<a href="#note1" id="note_1">
Example of footnote coding in a paragraph of text (code view):
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus quam orci, ut venenatis turpis lacinia eget. Curabitur aliquam faucibus condimentum. Suspendisse sapien quam, malesuada ac rutrum ac, bibendum non urna. Etiam nec tellus varius, ultricies tellus sed, vestibulum nulla. Duis suscipit felis vel justo posuere pellentesque. Mauris maximus ac massa vel ultricies. Nulla mattis laoreet mauris sit amet pulvinar. Quisque at velit dapibus, ornare orci eu, ultricies tortor.<sup class="footnote-number"><a href="#note1" id="note_1">1</a></sup></p>Example of how the footnote will display:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus quam orci, ut venenatis turpis lacinia eget.1 Curabitur aliquam faucibus condimentum. Suspendisse sapien quam, malesuada ac rutrum ac, bibendum non urna. Etiam nec tellus varius, ultricies tellus sed, vestibulum nulla.2 Duis suscipit felis vel justo posuere pellentesque. Mauris maximus ac massa vel ultricies. Nulla mattis laoreet mauris sit amet pulvinar. Quisque at velit dapibus, ornare orci eu, ultricies tortor.3
Note: you will need to "preview" your guide to see the CSS formatting in action. In edit mode, your note number will just appear as a link in superscript.
You should create the details for each note at the bottom of the page using new box which is named "Notes".
Use an ordered list for your notes, and include the style class="footnotes" in the opening <ol> tag. Include the note number target in each <li> tag as appropriate (see below):
<ol class="footnotes"> <li id="note1">... </li> <li id="note2">... </li> </ol>
In addition, at the end of each note, include the text "Back to text" surrounded by an anchor tag that links the user back to the appropriate place in the text (see below)
<ol class="footnotes">
<li id="note1">Suspendisse convallis neque quis augue iaculis, euismod placerat velit vehicula. Vivamus vel ipsum suscipit sapien tincidunt posuere sed dignissim purus. <a href="#note_1">Back to text</a></li>
<li id="note2">Aenean sed laoreet risus. Sed sed est ipsum. Pellentesque blandit diam sit amet arcu elementum, et auctor tellus rutrum. Phasellus feugiat leo nec metus malesuada, dapibus malesuada purus volutpat. Cras ac magna id lacus tempor hendrerit. <a href="#note_2">Back to text</a></li>
<li id="note3">Sed in ultricies nunc, ut maximus nulla. Duis nec nisl tellus. Donec vel massa sed ipsum imperdiet porttitor sed eu nunc. Proin arcu quam, tempus eu augue quis, mattis cursus est. Maecenas tellus ante, hendrerit vitae arcu eu, scelerisque auctor elit. <a href="#note_3">Back to text</a></li>
</ol>