In this tutorial, I’ll show you the simplest and recommended way to add footnotes to a page. For this exercise, I will be using the Facts and Figures: HIV and AIDS page on the HQ website as our example. Explore that page right now, clicking on the links to see how they behave.
The “Notes” section of your page is just another section within your page, with a header (<h2>) and paragraphs (<p>). You just need to surround that section with a DIV—add an opening <div> at the beginning and a closing </div> at the end of the section (don’t forget the closing </div>!)—with the following attributes in the opening <div>:
id="notes" style="font-size: 0.8em;"The opening <div> is highlighted in yellow in the screenshot below. The ID identifies the DIV as an anchor called “notes” to which you can link your references from the main body of the page, and the STYLE makes the font size of the paragraphs in the Notes section smaller (80% of the font size in the regular paragraphs).
I also recommend preceding the DIV with a horizontal rule (<hr />; highlighted in green in the screenshot below) to separate the Notes section from the main body of the page.
Once you have created the DIV with the anchor (id="notes"), you can link to the anchor from the references in the main body of the page. To do this, just add the reference, preferably in square brackets (for example, [1]), then add a link from the reference number to the “notes” anchor, so that your reference looks like this:
[<a href="#notes">1</a>]Do the same for the rest of the references (see screenshot below).
Check your work in the authoring/preview server, including making sure that all the reference links work, and once you are satisfied, you can publish your work to the production server (submit–approve).
Email if you have any questions.