Fußnoten in HTML erstellen

Hin und wieder ist es Sinnvoll in HTML Dokumenten mit Fussnoten zu arbeiten. Dies ist nativ unter HTML nicht vorgesehen, deshalb muss man etwas tricksen und mit Ankern arbeiten.

Der Fußnote habe ich eine klasse zugeordnet <div class="footnotes"> um sie im CSS gesondert bearbeiten zu können.

So sieht der Code aus:

<p>In diesem Satz werde ich eine Fußnoten<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> unterbringen. Dieser Satz enthält eine zweite Fußnote<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>.</p>
<div class="footnotes">
<hr>
<ol>
<li id="fn:1">
<p>Das ist die erste Fußnote.<a href="#fnref:1" rev="footnote">↩</a></p></li>
<li id="fn:2">
<p>Das ist die zweite Fußnote.<a href="#fnref:2" rev="footnote">↩</a></p></li>
</ol>
</div>

So sieht das Ergebniss aus:

In diesem Satz werde ich eine Fußnoten¹ unterbringen. Dieser Satz enthält eine zweite Fußnote².

ps. Beim direkten kopieren des o.g. Codes in deinen Texteditor kann es zu leichten Konvertierungsproblemen kommen.