Adding footnotes to web pages

To insert a footnote in web text, we need to insert internal links, which work just like regular links, but link within one page rather than out to other pages.

In both WordPress and Omeka, type your body text, and then go into the text editor (in WordPress, “Text” in the upper right corner of the editor bar, in Omeka, click “Use HTML” and then click the “HTML” box in the upper right.

To link the footnote and the citation, we need to tell the link where to point, and then identify another place in the page with that name.  In the example below, name tells the website what the designation of that place in the page is called, and href tells the website where to take the reader when they click on that link.  The href must include a hashtag (#) at the beginning to tell the website that this is an internal and not external link.

Notice that each name has a corresponding href in the matching footnote or citation–this is to link your footnote in the text to the citation below.  The numbers (bolded in the example) should all correspond for a footnote/citation combo, and will need to be changed for each new footnote.  (For example, body1/fn1; body2/fn2, etc).

<a name="body1" href="#fn1">[1]</a>
<a name="fn1" href="#body1">1</a> citation text

You’ll need to manually move the citation block to the end of the body text.

This is an example of what a functional web footnote should look like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis augue nec tristique molestie. Maecenas ac lectus risus. Aenean vel dapibus est. In ut ullamcorper nisl. Aenean ut dignissim magna, sed suscipit elit. Ut arcu lacus, consectetur a dolor eu, pellentesque varius sapien. Sed mattis urna sit amet ex dictum venenatis.[1]


1 Citation Text, “Lorem ipsum.”  Dolor Sit Amet.  (Albany: SUNY Press, 2015): 215-230.

Do not just paste the footnote code snippet into the visual editor!  It will not work as a link and it will appear as messy code in the page like this:
<a name=”body1” href=”#fn1“>[1]</a>
<a name=”fn1” href=”#body1“>1</a> citation text

You will always be graded on whether your citations are correct, if your footnotes work as links, and if you have clean links in your text.

One thought on “Adding footnotes to web pages

Comments are closed.