Fußnoten in HTML

Gerade las ich auf einer Seite das folgende Konstrukt: “ID²“. ‘Identification zum Quadrat?’ ging mir als erstes durch den Kopf. Bis mir dann eine weitere hochgestellte Zwei am Ende des Absatzes auffiel, welche dort das ausgeschriebene Wort “Identifikationsnummer” markierte. Offenbar wollte man hier eine Fußnote vergeben, dabei hätte man das auch einfacher haben können.

Abkürzungen

Abgesehen davon, dass man bei der Vergabe mit der “1″ anfangen sollte und “ID” für das englische “identification” steht, in so einem Fall ist eine Fußnote so unnötig wie irritierend. Für eine einfache Abkürzung hält HTML 4 bzw. XHTML 1.0 gleich zwei Elemente bereit: <acronym> für ein Akronym und <abbr> für eine Abkürzung. (Nachtrag: inzwischen gilt das acronym-Element als obsoltet, wir sollten also nur noch das abbr-Element verwenden) Im Quelltext sieht das so aus:

HTML:
<!-- acronym ist veraltet -->
<abbr title="zum Beispiel" lang="de">z.B.</abbr>

Die Vorteile liegen auf der Hand: beim Überfahren mit der Maus wird die Erklärung (der Wert des ‘title’-Tags) angezeigt und Screenreader wissen, dass sie es mit einer Abkürzung zu tun haben und werden diese entsprechend verständlich ausgeben.

Fußnoten

Nun gibt es durchaus Situationen, in denen man Fußnoten im Text gut gebrauchen kann. Hierfür ist das wohl naheliegende Element ein Anker der mit dem superscript-Element als hochgestellt ausgezeichnet wird:

HTML:
 
     Viel Text …
     <sup>
           <a id="anker1" title="Zur Erläuterung" href="#note1">[1]</a>
     </sup>
      …

So sieht es aus: schwieriger Text [1]

Die Fußnote ist also ein Sprunglink zu dem Element mit der ID “note1″. Am Ende des Textes listen wir alle Fußnoten auf, dabei kann es nützlich sein, auf den Absatz zurückzuverweisen, in der die Fußnote gesetzt wurde. So kann der Leser wieder zurück zur dem Punkt im Text springen, was bei sehr langen Texten hilfreich ist.

HTML:
<ol>
 
	<li id="note1"><a href="#anker1">[1]</a> Der Fußnotentext …</li>
	<li>…</li>
</ol>

Meine Fußnoten

  1. [1] Einfache Erläuterung

Kommentare

Es wurden noch keine Kommentarte zu diesem Artikel geschrieben.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die anagabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">