There's a lot of footnotes on this site already, and only one page uses them. I'd like to have more pages like that, so it makes sense to have a better system than what I have now. The solution is to use sidenotes.This is a sidenote.
The problem with that is that I'll have to change how the pages are written, but it's probably worth the effort.
Fortunately, someone already made the CSS for this, and I'm just reusing it for my stupid website (that's okay, it was under an MIT license). I find the sidenotes work quite well, but they get a bit confusing when citations are dense.
The sidenote is made up of a label, an invisible checkbox, and a span with text inside. That way, if someone's screen isn't wide enough they can still view the footnote by clicking on it, which will display it under that line of text.
I had to faff around with tex4ht for a few hours to get it to output footnotes like this, but I'm pretty sure it works now.
Edit: Because I've almost lost the config file for this about 8 times, I'll just add it here:
config.cfg
\Preamble{xhtml}
\makeatletter
% remove the footnote number in text
\Configure{footnotemark}{\setbox0=\vbox\bgroup}{\egroup}
% the <fnlabel> element is used to enclose the <a> element inserted by the referencing mechanism
% it will be then removed using Lua post-processing
\Configure{footnotetext}{%
\HCode{<label for="sn-\thefootnote" class="sidenote-toggle sidenote-number"></label><input type="checkbox" id="sn-\thefootnote" class="sidenote-toggle" /><span class="sidenote">}%
\IgnorePar% ignore next paragraph
\setbox0=\vbox\bgroup% remove the footnote number from footnote text
}%
{\egroup\IgnoreIndent}% start the paragraph in footnote
{\HCode{</span>}}% insert </p> in the next \EndP
\let\oldfootnote\footnote
\def\footnote{\SkipRefstepAnchor\oldfootnote}
\makeatother
\begin{document}
\EndPreamble