Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 6 of AO3 Work Skins/Tutorials
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks, Non-Fandom Formatting Guides, HTML & CSS stuffs, Ao3 Tutorials, The Witch's Brew, AO3 Useful Work Skins
Stats:
Published:
2015-08-17
Completed:
2017-06-28
Words:
3,457
Chapters:
3/3
Comments:
79
Kudos:
522
Bookmarks:
753
Hits:
32,527

How to Make Linked Footnotes on AO3

Summary:

This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.

EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.

Chapter 1

Notes:

(See the end of the chapter for notes.)

Chapter Text

<a name="return1" id="return1"></a>Lorem ipsum dolor sit amet[1]<sup>[<a href="#note1" title="click to see footnote">1</a>]</sup>, consectetur adipiscing elit. Ut eros augue, egestas non malesuada ac, viverra non erat. Sed aliquam turpis diam, sed dapibus est dictum non. Curabitur tristique nisl id rutrum vestibulum. Etiam eget metus in tellus finibus ornare ac at justo. Suspendisse molestie imperdiet elementum. Pellentesque sollicitudin sagittis massa vehicula pharetra. In pretium luctus nisl tempor molestie. Praesent varius consectetur eros, in tincidunt erat accumsan et. Nullam luctus dolor tristique massa semper venenatis. Duis mollis et sapien ac elementum. Sed congue scelerisque leo. In elementum pellentesque finibus. Aliquam at velit vestibulum, placerat ipsum a, tincidunt augue.

Praesent in orci dignissim, maximus magna eu, venenatis est. Phasellus mollis velit libero, sit amet gravida purus iaculis sit amet. Proin sed auctor sem, ut lacinia velit. Duis ullamcorper tellus eu eros aliquam, vitae tempus tellus auctor. In maximus euismod orci a auctor. Morbi sodales nisl non eros suscipit, quis euismod lectus cursus. Mauris facilisis diam arcu, id semper dolor maximus sit amet. Proin mattis nisi non ornare pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula eget libero at consectetur. Suspendisse in justo non ipsum dictum elementum eget vitae dolor. Maecenas gravida elit ac egestas tristique. Sed vel auctor augue. Sed sed tortor hendrerit, mollis eros ac, egestas quam. Quisque vulputate risus sed ultrices viverra.

Duis accumsan justo eu nisi varius, eget auctor lacus fringilla. Donec ac ullamcorper tellus. Aenean vulputate ligula justo, ut tempor justo tempus dictum. Nunc tellus lectus, pulvinar in justo at, volutpat condimentum lectus. Nullam eget cursus massa. Curabitur ornare sapien suscipit purus rutrum, eu blandit augue bibendum. Vestibulum mollis scelerisque nulla vel malesuada. Fusce quis tellus a ligula consectetur finibus. <a name="return2" id="return2"></a>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<a href="#note2" title="click to see footnote"><sup>&#8224;</sup></a> Sed pellentesque feugiat libero et posuere. Nulla malesuada nisl ultricies urna pharetra, non volutpat justo malesuada. Curabitur mattis consectetur magna, blandit iaculis tellus egestas eu. Duis molestie fringilla ex, in fermentum erat commodo ornare.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam fringilla massa justo, a laoreet leo pharetra eu. Donec pretium aliquet purus ut tempus. In sit amet lacus justo. Sed egestas libero eu nunc tincidunt lobortis. Sed vitae justo ut erat eleifend sagittis. Vivamus ornare vehicula erat sit amet venenatis. In id urna rhoncus, hendrerit felis quis, iaculis libero. Sed ultrices posuere fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus ullamcorper placerat. Aenean et interdum erat. Ut id erat et urna euismod facilisis. Sed volutpat consequat mauris, sit amet commodo massa finibus non.

Integer consectetur dui at fringilla condimentum. Integer et est id dui mattis consequat nec et diam. Donec id nibh hendrerit, aliquet nibh non, eleifend diam. Donec tristique maximus ornare. Nulla facilisi. Etiam nibh enim, molestie id mauris in, imperdiet blandit erat. Praesent sit amet erat libero. Nulla nec sagittis risus, scelerisque posuere neque. Duis eu dignissim arcu, at pellentesque massa.

Mauris aliquet pulvinar sapien mollis ullamcorper. Duis mattis nibh purus, non commodo magna ultrices tincidunt. Vestibulum sit amet iaculis leo. Suspendisse potenti. Aliquam massa dui, dignissim id feugiat quis, euismod vitae nulla. Nunc ac orci tincidunt, vehicula risus sed, sagittis justo. Sed luctus nisl in ultricies vestibulum. Quisque consequat, nisi nec sodales aliquam, turpis orci faucibus lorem, eget interdum nisi turpis vitae massa. Duis nec tincidunt enim, quis scelerisque justo.

Aliquam erat volutpat. Nullam sed neque et mauris tristique luctus eget volutpat risus. Aliquam vel laoreet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac leo et est elementum imperdiet. Integer varius augue quis enim posuere, nec blandit metus sodales. Aenean ultricies, nulla ut rhoncus tincidunt, nibh nisl tincidunt augue, et placerat ex mauris viverra risus. <a name="return3" id="return3"></a>Maecenas id malesuada ligula. Praesent libero erat, dapibus eget felis et, rutrum imperdiet tellus. Maecenas a velit magna. Pellentesque vel lectus tempus, euismod felis a, fringilla urna. [3]<sub>[<a href="#note3" title="click to see footnote">3</a>]</sub>

Donec pretium nisl magna, sit amet pretium risus venenatis at. Donec pharetra, risus eleifend tempus luctus, nisi quam imperdiet libero, sit amet cursus ante felis vel erat. Aenean sit amet congue massa. Phasellus ac pulvinar lectus, at laoreet sem. Vestibulum ut urna porttitor, condimentum tortor id, tempus dolor. Nullam interdum, lacus non sagittis molestie, lacus sapien imperdiet nisl, non bibendum risus mi ac orci. Donec sit amet est eu purus auctor feugiat id vitae eros. Vestibulum rutrum, ligula nec semper auctor, nisl mauris dignissim libero, sed viverra sem arcu in ante. Fusce nisl mauris, tempus eget efficitur eget, tincidunt vitae mauris. Integer arcu turpis, lacinia in elementum sit amet, auctor eget est. Cras fermentum tincidunt augue, id semper lectus facilisis nec. Nullam a diam ac sem finibus vestibulum.

Nulla facilisi. Donec in justo a urna rutrum pellentesque. Vivamus laoreet suscipit leo sit amet convallis. Curabitur sodales, sem vitae dignissim convallis, ipsum eros vulputate nunc, at suscipit tellus neque eu felis. Etiam non viverra lectus, vel sagittis metus. Duis urna libero, efficitur nec ultricies eget, condimentum ut metus. Sed cursus a dolor nec blandit. Sed efficitur odio libero, non venenatis felis tristique non.

Fusce sed porta tortor. Pellentesque dui nibh, ultrices semper nunc eu, tincidunt laoreet tellus. In vel nunc mauris. Cras imperdiet dignissim tellus. Cras cursus metus a massa venenatis interdum. Nam scelerisque lacus facilisis, fermentum libero in, hendrerit quam. Aenean sed ante nunc. Maecenas finibus fringilla finibus. Morbi pellentesque iaculis ante, ut porta lorem malesuada a. Duis vel tempus ex. Nunc vel nunc nulla. Fusce id ligula sed urna interdum fringilla in vel dui. Suspendisse non nisl vel justo vestibulum finibus. Nulla egestas, lacus nec ornare iaculis, lorem lorem tincidunt nisi, nec efficitur tellus felis sed ipsum. Proin pharetra sollicitudin quam vitae condimentum. Nam tempor tempus mauris a porta.

Phasellus maximus condimentum ligula id venenatis. Donec blandit feugiat placerat. Nulla mattis pretium tortor scelerisque egestas. Etiam sed aliquet justo. Pellentesque eget est et lacus condimentum consectetur id et nibh. Sed varius accumsan nunc, nec mollis dolor fringilla nec. Donec id eleifend massa. Integer gravida lorem non sem molestie finibus. Etiam aliquam arcu quis quam dictum, non rutrum sem gravida. Praesent consectetur nulla vel nisi blandit tincidunt. Pellentesque nibh ex, mollis scelerisque nunc ac, hendrerit aliquam leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu placerat felis. Phasellus sagittis laoreet dolor, eget eleifend augue molestie et. Pellentesque pellentesque egestas gravida. Aliquam mollis, lorem eu rhoncus lobortis, massa mauris posuere enim, non laoreet erat felis in sem.

Cras sagittis tortor et erat interdum, non efficitur mauris fermentum. Praesent sem velit, congue nec lacus sit amet, bibendum lobortis felis. Nunc urna ipsum, suscipit et semper quis, tincidunt egestas nisl. <a name="return4" id="return4"></a>Phasellus ac tellus dictum, finibus ante non, eleifend turpis. Nulla vulputate vel est a aliquet. Vestibulum fermentum commodo nulla, at finibus tellus. Praesent dapibus augue quis leo mattis, eu sagittis urna convallis. Praesent vulputate[4]<sup>[<a href="#note4" title="click to see footnote"><b>4</b></a>]</sup> mauris ac felis porttitor aliquet. Nunc maximus dolor eget metus ultricies, non dignissim felis hendrerit. Aenean a cursus libero, sit amet consequat urna. Duis dignissim nisl arcu, non placerat massa elementum sit amet. Sed vitae neque consectetur magna auctor ornare a eget velit. Pellentesque at accumsan libero. Nullam eget luctus dolor. Fusce tincidunt ante tortor, id fermentum diam molestie eu.

Donec aliquet odio eu magna luctus dictum. Integer varius lacus quis egestas dignissim. Fusce ut ultricies felis, eu sodales ex. Praesent porttitor ac felis vel sagittis. Maecenas a tristique ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ut dui facilisis ex posuere lacinia. Suspendisse a elit a massa imperdiet consequat. Morbi odio turpis, consectetur et vestibulum at, laoreet eget ex. Sed vel dignissim turpis, in elementum nunc. Fusce bibendum bibendum lorem eget auctor. Proin vitae accumsan felis, in imperdiet sem. Quisque varius nulla ut est porttitor ultricies. Aliquam erat volutpat. Curabitur massa felis, fermentum et enim aliquet, convallis tincidunt felis. Curabitur malesuada libero vel sem maximus condimentum.

Phasellus risus quam, scelerisque eu sagittis vel, tempus eu nisl. Integer aliquet ultricies felis, sed finibus leo malesuada auctor. Ut efficitur venenatis ipsum, et malesuada enim pellentesque eget. Nam pulvinar interdum ornare. Duis at aliquam sem. Aliquam non nulla scelerisque, ornare neque vel, placerat ex. Ut quis consectetur nisl. Vivamus mollis ultrices leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum est magna, scelerisque vel lacus non, rhoncus vestibulum arcu. Sed imperdiet justo non elit pellentesque pulvinar. Nunc gravida velit sem, ac semper diam interdum eu. Phasellus quis ultricies justo.

Nunc maximus fringilla turpis, quis sagittis dui blandit sed. Donec feugiat augue sed nunc lacinia, eu aliquet sapien semper. Suspendisse potenti. Nulla volutpat, augue non ultricies varius, urna arcu condimentum mauris, at dapibus justo turpis vitae nibh. Vestibulum congue tincidunt hendrerit. Nam eget interdum risus. Quisque suscipit, tellus at malesuada rutrum, ligula nibh tincidunt mauris, at aliquet augue tortor sed ipsum. Maecenas lacus enim, tempor et nibh sit amet, porta luctus tellus. Aliquam semper varius accumsan.

<a name="return5" id="return5"></a>Etiam velit nunc, ultricies a risus id, interdum placerat dui. Sed in dolor augue. Maecenas eget faucibus ipsum.[5]<sup>[<a href="#note5" title="click to see footnote">5</a>]</sup> Vestibulum porta scelerisque tellus quis vehicula. Integer commodo mi lobortis nisi lobortis, a vehicula felis tempor. Curabitur leo ante, accumsan sit amet tellus vitae, aliquet imperdiet elit. Aliquam porta maximus orci quis lobortis. Nulla orci enim, dignissim finibus malesuada vitae, condimentum ac lectus. Morbi sollicitudin diam quis felis interdum, non congue erat semper. Aenean malesuada consectetur enim, et dignissim massa maximus nec. Morbi finibus blandit ornare. Duis rutrum nec ante id suscipit. Integer eu dictum purus, at vestibulum nibh. Donec ac ante et ipsum feugiat dignissim. In mollis ut enim eget tristique.

Nulla iaculis, dui sed tempus porttitor, nibh urna ultricies elit, ac lacinia leo tortor non nulla. In posuere sit amet velit non laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sodales feugiat risus quis congue. Integer vel bibendum lectus. Ut bibendum sem rhoncus ipsum laoreet ultricies. Ut posuere, neque ut ultrices viverra, sem mi ullamcorper enim, mollis porta dolor odio a turpis. Pellentesque sit amet turpis tincidunt libero consectetur suscipit eu eu nisi. Nullam a nunc ultrices, euismod leo non, sodales nibh.

Notes:

<a name="note1" id="note1"></a>1<sup>1</sup>Lorem Ipsum has been the standard dummy text of the printing and typewriting industry since the 1500s, though its roots come from a piece of classical Latin literature dating 45 BC. To find out more (and how to generate your own), visit http://www.lipsum.com/. [ return to text ]<sup>[<a href="#return1" title="return to text">return to text</a>]</sup>

<a name="note2" id="note2"></a><sup>&#8224;</sup> As you can see, you don't necessarily have to use numbers to mark your notes, but be aware that some browsers make have trouble loading certain characters. To find a collection of symbols, what they look like, and what code you need to use them, I suggest http://copypastecharacter.com/. Of course, I know there are plenty who believe a plain asterisk works just as well. ;) [ ]<sup> [ <a href="#return2" title="return to text">&#9650;</a> ]</sup>

<a name="note3" id="note3"></a>3<sub>3</sub> While I found nothing that says you can't use subscript (<sub>) instead of superscript (<sup>), the latter is more traditionally used for footnotes, while the former is used for things like H2O. [ return to text ]<sup>[<a href="#return3" title="return to text">return to text</a>]</sup>

<a name="note4" id="note4"></a>4<sup><b>4</b></sup> You can also add the bold tag around your links to make them stand out more, either by using <b>4</b> or <strong>4</strong>. [ return to text ]<sup>[<a href="#return4" title="return to text">return to text</a>]</sup>

<a name="note5" id="note5"></a>5<sup>5</sup> If you have a lot of footnotes (or just very lengthy ones), be aware that you are limited 5000 characters in the "Notes" box. Granted, that might seem like a lot, but don't forget your coding (even though you're the only that will see it), also goes towards that 5000 count. For example, at this point, I have less than 1500 characters left (though I also included a lot more coding than you personally would in order for you to able see the coding when you turn off Creator's Style on this page). So if you find yourself running out of room, you might want to make your own notes section at the end of your work. [ return to text ]<sup>[<a href="#return5" title="return to text">return to text</a>]</sup>