Creating footnotes - HTML anchors

In this article we explain how to add in HTML anchors. Once you know how to do them, these will allow you to link one section of text to another further down a page, so they can be used to:

Create footnotes

Fix footnotes copied in from Word

Allow readers to jump to a specific chapter in an article

(et voila! The above links have been created using HTML anchors)

Create footnotes

Firstly, get all your text in the page as you want it to look, with your footnote numbers added in throughout the text and the footnotes themselves listed at the bottom.

Now we need to assign the numbers in the text with a link to the footnotes at the bottom, this is where the HTML comes in.

Step 1:

Select 'Source' and find your first footnote number in the body of the text. 

Here, I'm linking the [1] in the text to the first footnote. 

We're going to give this an id reference so we can link it to its corresponding footnote. I always go for something quick to type and easy to remember. For this example I'm giving my first footnote the id="section1"

Now you need to add that id reference to your marker, plus an instruction to link this to your footnote. This is how it needs to look for my example:

<a href="#section1">[1]</a>

Breaking down this code:

• An <a> tag specifies this is a link
• href="" allows you to define the link address (which you put between the inverted commas)
• Your id attribute in this section needs a # in front of it.

Step 2:

Now we're going to give our footnote itself that same id reference, so the footnote marker link can find it.

Still in 'Source', scroll down to find your first footnote at the bottom of the page. My one looks like this:

<p>[1] A bit more info about section one</p>

Step 3:

Now you need to add that id attribute to your footnote. This is how it needs to look for my example:

<p id="section1">[1] A bit more info about section one</p>

So you're adding in your id inside whatever tag comes before your footnote text. In this example the preceding tag is a paragraph tag <p> so I've put my id attribute after the p, but inside its pointy brackets (or as I like to call them, 'sideways wizard hats'). Note that this time the id attribute doesn't have a # in front of it.

Step 4:

Repeat this for all of your footnote markers and footnotes, ensure you give each marker a different id attribute though. The image below shows how my marker link and anchor look in the source code. I have also done the same for my two other footnotes.

Fix footnotes copied in from Word

In some instances you may wish to include fairly chunky blocks of text (often copied over from a Word document), and these might already have footer references in them. Sadly, Word doesn't always communicate as well with websites as one might hope and the references from your document may not copy across correctly, with the link for the reference leading nowhere.

The image below shows footnotes in the body of the text. By adding an HTML anchor if I click on the little [3] in the text my webpage will take me straight down to the [3] footnote at the bottom.

Here you'll be following the same instructions as above, but instead of adding in brand new anchors, you'll be editing the broken existing ones to make them work:

Step 1: 

Click on the 'Source' button on the text editor toolbar.

Step 2: 

Find the footnote marker in the body of the text that you want to serve as the link to the footnote. It is likely to have a residual link in there. Remove whatever is in the <a href="...."> preceding your [1] and replace it with your own id attribute

For example:

<a href="#Reference1"></

The chunk of text should look something like this, with the relevant element in bold (remember the #, it's important):

<p>Difficult decisions may have to be taken when there are competing policy priorities. Before issuing a direction, Councillors must take advice from the agency and responses to any consultations with interested parties.&nbsp; Such action<a href="#Reference1">[1]</a> is most likely to be needed when problems have become widespread.</p>

Step 3: 

Now find the footnote/bit of text you are linking to at the bottom of the document. If it is also part of a document imported from Word, it will also likely have a residual link in there that does not work, looking something like:    

<p><a href="generic_url/xxxxxxxxxxx">[1]</a>your footer text</p>

you need to delete the href and what's currently between the quotation marks and replace it with the simple id attribute:

<a id="Reference 1">

This turns the [1] into an 'anchor'. It will now look like this:

<p><a id="Reference 1">[1]</a>your footer text</p>

Allow readers to jump to a specific section of an article

Same rules as for adding in footnotes, only this time you'll likely be linking from a line of text or something in a contents list rather than a single footnote number. You'll also probably be linking to chapters or sections dotted throughout an article, rather than footers just at the bottom.

Step 1: 

Click on Source and find the line of text you want to link to another section in the article.

Step 2:

Add in your html link around the text:

<a href="#yourid">the text you are linking goes here</a>

Step 3:

Now find the title of the section you're linking to and put your id attribute in here:

<p id="yourid">The title of the section></p>

And you're done!