AO3 should have an Annotation Mode where you can click to view all of the author's commentary and thoughts about certain parts of the work. A little comment that says "I spent five hours researching vintage radio mechanics for this and didn't even end up using it" or "this is an ancient Hebrew literary technique!" would make my day
So, one way to do this using HTML on Ao3 is to use the author notes, combined with links & mouseover text - some instructions under the readmore.
In order of the way each element will appear on the page:
First:
<a name="back1" rel="nofollow" id="back1">
This is the reference for where on the page the reader will be taken back to after reading the note, I usually put it at the top of the paragraph, or the paragraph before the one I have the note in, so it feels a bit nicer. If I have multiple in one paragraph, you can use the same one but you can see that I didn't below, lol.
Second:
<a href="#note1" title="THIS IS AN ANNOTATION" rel="nofollow"><sup>[THIS IS WHAT GETS HOVERED OVER]</sup></a>
This is the mouseover text and also the part of the text that gets hovered over. The title is whatever your note or annotation is, inside the quotes. The after that is the bit in the text that you want to have the link or mouseover text in. I tend to go for superscript numbers in square brackets to go with the footnote vibe, but you can also have it as the normal text of the fic and take out the <sup> tags.
Third: <ol><li><a name="note1" rel="nofollow" id="note1"></a>THIS IS AN ANNOTATION AGAIN<sup><a href="#back1" title="return to text" rel="nofollow"> [ ▲ ]</a></sup></li></ol>
This goes in the author's note (or anywhere ig, but this is easiest to keep at the bottom) and is where the link on the second part takes you. The note/annotation is here again and is visible to readers who can't use the mouseover text for whatever reason, e.g. mobile and I think screen readers? We also include a link back to the text that the annotation was in, which takes us back up to the first code snippet. I have mouseover text saying 'return to text' and then an icon but again, you can do whatever you want. I also surround all the notes with <ol> and <li> tags to make it a list, which you can see better below.
Additionally, the variable names/references all up to you, but make sure they are different and consistent (and different across chapters). The first code snippet is named 'back1', and is referenced in the third snippet with href="#back1". Similarly, the third snippet is named "note1" and is referenced by the second snippet with href="#note1".
If you don't match these up, your annotations won't match up properly or may not even work at all. The mouseover text should still work though. It is also important to continue numbering across chapters because, if you start your notes back at 1 each time, then if someone is reading the entire work, the links will also be broken/only taking them to the first note of the work, rather than the first note of the third chapter, for example.
And here is an example of my opening paragraph from one of my fics so you can see them used in context:
<p><strong>[Tim]</strong><br /> <a name="back1" rel="nofollow" id="back1"></a><a name="back2" rel="nofollow" id="back2"></a>Ever since Danny had shown up, he’d taken to haunting Tim. Apparently he’d decided that Tim was an unsupervised child in dire need of something at least vaguely approximating an authority figure.<a href="#note1" title="It was the easiest way to come to terms with this new binding. This meant it was his decision." rel="nofollow"><sup>[1]</sup></a> Tim didn’t really mind, it was nice having a friend around, even if he was a few years older (or maybe several decades? They still weren’t entirely sure what the deal was there) than him. And also a ghost. Maybe. Well, he was human at the manor when Tim’s parents weren’t around. But they couldn’t really enrol Danny at Tim’s boarding school - he didn’t technically exist in this dimension, after all. And neither Tim nor Danny’s hacking skills were at the level where they could forge an ID for him.<a href="#note2" title="Apparently, Danny's friend Tucker could have done that in 20 minutes, with no sleep, on a PDA." rel="nofollow"><sup>[2]</sup></a><br /> So far, things had been pretty smooth-sailing, which, of course, was exactly when it all went downhill.</p>
And the corresponding author's notes:
<ol><li><a name="note1" rel="nofollow" id="note1"></a>It was the easiest way to come to terms with this new binding. This meant it was his decision.<sup><a href="#back1" title="return to text" rel="nofollow"> [ ▲ ]</a></sup></li> <li><a name="note2" rel="nofollow" id="note2"></a>Apparently, Danny's friend Tucker could have done that in 20 minutes, with no sleep, on a PDA.<sup><a href="#back2" title="return to text" rel="nofollow"> [ ▲ ]</a></sup></li> <li><a name="note3" rel="nofollow" id="note3"></a>He had managed to get some after school classes because he both wants to be just like Robin and also he's a rich kid and they get kidnapped - but this is like 5 tall adult men so...<sup><a href="#back3" title="return to text" rel="nofollow"> [ ▲ ]</a></sup></li> <li><a name="note4" rel="nofollow" id="note4"></a>No, for real. He has spent so many hours throwing this thing around.<sup><a href="#back4" title="return to text" rel="nofollow"> [ ▲ ]</a></sup></li> <li><a name="note5" rel="nofollow" id="note5"></a>Cue finger guns<sup><a href="#back5" title="return to text" rel="nofollow"> [ ▲ ]</a></sup></li></ol>
So the work will look something like this (but Ao3 formatting is a little different than Tumblr):
[Tim] Ever since Danny had shown up, he’d taken to haunting Tim. Apparently he’d decided that Tim was an unsupervised child in dire need of something at least vaguely approximating an authority figure.[1] Tim didn’t really mind, it was nice having a friend around, even if he was a few years older (or maybe several decades? They still weren’t entirely sure what the deal was there) than him. And also a ghost. Maybe. Well, he was human at the manor when Tim’s parents weren’t around. But they couldn’t really enrol Danny at Tim’s boarding school - he didn’t technically exist in this dimension, after all. And neither Tim nor Danny’s hacking skills were at the level where they could forge an ID for him.[2] So far, things had been pretty smooth-sailing, which, of course, was exactly when it all went downhill.
And, then in the author's notes:
It was the easiest way to come to terms with this new binding. This meant it was his decision. [ ▲ ]
Apparently, Danny's friend Tucker could have done that in 20 minutes, with no sleep, on a PDA. [ ▲ ]
He had managed to get some after school classes because he both wants to be just like Robin and also he's a rich kid and they get kidnapped - but this is like 5 tall adult men so... [ ▲ ]
No, for real. He has spent so many hours throwing this thing around. [ ▲ ]
Cue finger guns [ ▲ ]
So there you have one way to do annotations or commentary, it's pretty straightforward as long as you keep track of your numbers, and works for both mobile and desktop, and also works independently of skins. You can also achieve similar results using work skins, I believe, which has been mentioned in some of the other reblogs, but I can't say I've tried that method.
Also here's what the mouseover text looks like in my fic:
There are also some pretty good resources up on Ao3 already, which is where I picked up some stuff that I plan to use on other fics at some point.
An example for footnotes is this one: https://archiveofourown.org/works/4579026
And the series it is a part of also has a bunch of other great tutorials and tips for things to include.
Also, if you think of something you want to try in a fic (or a comment!), you can get a quick idea of how easy or doable it is by searching up “[thing you want to do] html”. And you should be able to find some examples. You don’t need to know how to code, or really know html that well since it’s all inline, so you can more or less copy+paste the code snippets where you want them and just change the references.
