The Nice and Accurate Guide to Footnotes

by Vigs

Summary:

If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.

But html can be confusing. What can you do?

Read this guide to find out!

Notes:

• For fersh.

Author's note: I would be remiss if I didn't give credit to La_Temperanza's work How to Make Linked Footnotes on AO3, which is how I originally figured out how to get AO3 to let me make linked footnotes. It's a less step-by-step guide, but offers a lot more options and possible uses for hotlinks within your story, so definitely check it out if you feel so inclined.

Step 0: So You Want To Write a Footnote Fic

If you're writing fanfiction for Good Omens[1], you may find yourself wanting to include footnotes[2].

1.Or another original work that includes footnotes.

2.Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.

But html can be confusing[3]. What can you do?

3. And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.

 

Well, you can always stick to what I just did and make your footnotes the paragraph after the one that they're attached to. It's not the most fancy or elegant thing, but it gets the job done, and it isn't particularly distracting, really. But what if you want to be fancy? Read on, my friend.

---

Step 1: Minimal html

If you're writing fanfiction for Good Omens¹, you may find yourself wanting to include footnotes².

<ol><li>Or another original work that includes footnotes.</li>

<li>Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.</li></ol>

But html can be confusing¹. What can you do?

<ol><li>And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.</i></ol>

 

Getting into the html editor can be intimidating. If you copied formatted text into the rich text editor, AO3 probably already added a bunch of weird formatting stuff and "&nbsp"s and maybe a bunch of random looking <span>s, depending on where you originally wrote up your text. Just ignore that. Leave the <p>s and the <br>s and anything else you may see as they are. By following the example above (putting  around each number and <ol> before your footnotes, <li></li> before and after each individual footnote in a block, and </ol> at the end of the block of footnotes, you can make something that looks like this:

 

 

If you're writing fanfiction for Good Omens¹, you may find yourself wanting to include footnotes².

1. Or another original work that includes footnotes.
2. Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.

But html can be confusing¹. What can you do?

1. And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.

 

That looks much nicer, and it clearly differentiates between footnotes and main text. It's not too different from the way books do it, really.

"But Vigs!" I hear you cry beseechingly. "Other authors have cool links between the text and their footnotes! I want to be really fancy!"

If what I'm hearing is you (and not just some weird earwax), read on! (Or, if you'd prefer to do mouseover footnotes instead of linked footnotes, skip down to Alternative Option.)

---

Step 2: Adding some <a>

If you're writing fanfiction for Good Omens<a href="#note1">¹</a>, you may find yourself wanting to include footnotes<a href="#note2">²</a>.

But html can be confusing<a href="#note3">³</a>. What can you do?

<ol><li><a name="note1" id="note1"></a>Or another original work that includes footnotes.</li>

<li><a name="note2" id="note2"></a>Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.</li>

<li><a name="note3" id="note3"></a>And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.</li></ol>

 

There are a couple of important things to note about this example. For the <a> tags around the in-text footnotes, you want to put quotation marks around the name of the destinations (like "note1" or "note2") and a # before the name, and you want the <a> and the </a> to be on opposite sides of the number. For the destination markers, you still want quotation marks, but the <a> and </a> tags don't have to actually go around anything; just make sure that you have both. (Yeah, you need to do both "name" and "id." It's a browser compatibility thing.) Following that example will give you this:

 

 

If you're writing fanfiction for Good Omens¹, you may find yourself wanting to include footnotes².

But html can be confusing³. What can you do?

1. Or another original work that includes footnotes.
2. Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.
3. And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.

 

(Note: If you look at it in rich text edit mode, you should see little down arrows everywhere you used <a> with "name" and "id" fields.) Now that's pretty dang fancy! Your readers can click on the footnote to go right to it, and then use the back button to get back to where they were.

But... is it fancy enough? What if you want your readers to be able to go from the footnotes to the main text without having to use the back button?

In that case, you're going to want to do what we just did, and also do it in reverse. Don't worry, it's easier than it sounds!

---

Step 3: Bringing it Back

<a name="back1" id="back1"></a><a name="back2" id="back2"></a>If you're writing fanfiction for Good Omens<a href="#note1">¹</a>, you may find yourself wanting to include footnotes<a href="#note2">²</a>.

<a name="back3" id="back3"></a>But html can be confusing<a href="#note3">³</a>. What can you do?

<ol><li><a name="note1" id="note1"></a>Or another original work that includes footnotes.^{<a href="#back1"> [ ▲ ]</a>}</li>

<li><a name="note2" id="note2"></a>Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.^{<a href="#back2"> [ ▲ ]</a>}</li>

<li><a name="note3" id="note3"></a>And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.^{<a href="#back3"> [ ▲ ]</a>}</li></ol>

 

This looks more complicated than the last example, but all you're really adding is those triangles, and you can copy and paste them just fine. All you've done is add a destination to the beginning of each sentence or paragraph, whichever you prefer, that contains a footnote, and then added the bit with the triangle to the end of each footnote. (You may have noticed that "back1" and "back2" are in the same spot. If you want, you could just include "back1" and have the triangles after footnotes 1 and 2 both link to it, but I included both for completeness.) Check out this fanciness:

 

 

If you're writing fanfiction for Good Omens¹, you may find yourself wanting to include footnotes².

But html can be confusing³. What can you do?

1. Or another original work that includes footnotes. ^{[ ▲ ]}
2. Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here. ^{[ ▲ ]}
3. And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help. ^{[ ▲ ]}

 

Woah! That's fancy as heck! (Although from here on, the link URLs aren't exactly going to match what I'm showing you, because otherwise it would just link and re-link to the first set of footnotes.) That's about where I stop when I'm formatting my fic (cough cough). But it is possible to get... even fancier.

---

Step 4: Mouseover text

<a name="back1" id="back1"></a><a name="back2" id="back2"></a>If you're writing fanfiction for Good Omens<a href="#note1" title="click to see footnote">¹</a>, you may find yourself wanting to include footnotes<a href="#note2" title="click to see footnote">²</a>.

<a name="back3" id="back3"></a>But html can be confusing<a href="#note3" title="click to see footnote">³</a>. What can you do?

<ol><li><a name="note1" id="note1"></a>Or another original work that includes footnotes.^{<a href="#back1" title="return to text"> [ ▲ ]</a>}</li>

<li><a name="note2" id="note2"></a>Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.^{<a href="#back2" title="return to text"> [ ▲ ]</a>}</li>

<li><a name="note3" id="note3"></a>And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.^{<a href="#back3" title="return to text"> [ ▲ ]</a>}</li></ol>

 

That will look about the same as the example above, except that if you mouse over the links, you'll see whatever text you put as "title." Note: this does not work for mobile users.

 

 

If you're writing fanfiction for Good Omens¹, you may find yourself wanting to include footnotes².

But html can be confusing³. What can you do?

1. Or another original work that includes footnotes. ^{[ ▲ ]}
2. Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here. ^{[ ▲ ]}
3. And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help. ^{[ ▲ ]}

 

Aw yeah! If there's a way to make things fancier than that, I don't know how! Truly, the student has now surpassed the master.

Unless what you'd really like to do is have the footnotes show up as a mouseover instead of a link. Personally, I don't prefer this style, but that's because I sometimes write absurdly long footnotes. But here's an alternate option for people who, like, don't do that, or whatever.

---

Alternative Option: Mousover footnotes

If you're writing fanfiction for Good Omens <a title="Or another original work that includes footnotes.">¹</a>, you may find yourself wanting to include footnotes<a title="Possibly a lot of footnotes. Possibly way too many footnotes. Don't worry. You're among friends here.">²</a>.

But html can be confusing<a title="And even more confusingly, AO3 doesn't natively allow every possible use of html, so even looking at an html guide may not help.">³</a>. What can you do?

 

That's shorter and looks a lot cleaner from an html perspective, but it can get finnicky for the reader, especially if they're reading on their phone (some phone users won't be able to see your footnotes at all) or you, like me, sometimes write multi-sentence (or occasionally multi-paragraph...) footnotes. It'll look like this:

 

 

If you're writing fanfiction for Good Omens ¹, you may find yourself wanting to include footnotes².

But html can be confusing³. What can you do?

 

And there you have it! Everything I know about making footnotes on AO3. Go forth and write some fic!