A footnote can be used to present an ancillary piece of information usually at the bottom of a page. The benefits of creating footnotes are that the author can add a note of reference, explanation, or comment without disrupting the structure of the sentence. A footnote immediately connects the reader to the citation or your specific thought, concept, or idea related to that text.
What is a footnote?
Footnotes1 can be essential when trying to relay additional information to a user. Most readers will review the footnotes
after they read the text from where the footnotes are anchored 2 to more fully understand the content.
- HTML experience
How to create a footnote
Step 1: Identify the text to which to add the footnote
Identify the text that you wish to add some additional information or a citation to.
Step 2: Add a superscript number
- Add the footnote number at the end of your text.
- Highlight the footnote number and click the Superscript button in the editor.
Step 3: Create the footnote section
- Navigate to the bottom of the page or content.
- To separate the footnote section from the rest of the content, click the Page Break button in the editor to add a horizontal line.
Step 4: Add the footnote reference
Underneath the page break line, add your footnote's reference. Make sure to reference the original number of the footnote 3.
Step 5: Link the footnote and its reference
Create a link between the footnote and reference so the reader can jump directly to the bottom of the page where the information is found:
- Highlight the footnote number at the end of your text and click the Link button.
- Delete the content in the Link to: field and click Update Link to create a blank link.
- In the editor toolbar, click View and select Source.
- In the source code, find the link's
- Modify the
hrefproperty based on your own naming conventions. In the example below,
- Add an
- The final link should look something like this in Source mode:
<a href="#fn1" id="rf1" title=""><sup>1</sup></a>
Step 6: Link back to the original source
When linking back to the original source, you should give users some visual marker that there is a link back to the original source of the footnote to help user adoption. The return character
↵ is this visual representation of the HTML char code
&crarr. You can use any visual marker to let the user know there is a link back to the source. Repeat items 1 through 6 in the previous step. The link should look something like this (Note how the
id are switched from the previous example):
<a href="#rf1" id="fn1" title="">↵</a>
1. A footnote is a note placed at the bottom of a page that it is on or cites a reference for a designated part of the text. ↵
2. Often, the most interesting information is found in the footnotes. ↵
3. That is all it takes to create a footnote. ↵