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:

<!-- 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 naheliegendste Element ein Anker der mit dem superscript-Element als hochgestellt ausgezeichnet wird:

<!-- Viel Text -->
<sup>
	<a id="anker1" title="Zur Erläuterung" href="#fn1">[1]</a>
</sup>
<!-- …noch mehr Text. -->

So sieht es aus: Viel Text [1] …noch mehr Text.

Die Fußnote ist also ein Sprunglink zu dem Element mit der ID "fn1". 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.

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

Meine Fußnoten

  1. [1] Einfache Erläuterung

Kommentare

  1. 01) 14.03.2011
    Andreas Reiff

    Kurz, prägnant und hilfreich.

    Genau das habe ich gesucht, danke!

  2. 02) 14.03.2011
    David

    Und dankt Google einer der meist besuchten Beiträge hier.

  3. Wozu will man Fußnoten in Hypertext? Randnoten (im Stil von Tufte) vielleicht, aber rumscrollen? Medium verfehlt.

  4. 04) 03.04.2011
    David

    Im wissenschaftlichen Bereich z.B. zur Quellenangabe. Der Vorteil dieses Mediums ist es, dass man eben nicht „rumscrollen“, bzw. den Blick wandern lassen muss, wie bei gedruckten Medien.

  5. 05) 08.04.2011
    Alex

    Früher hatte ich Fußnoten genauso in der HTML-Version eingearbeitet. Problem: Eine auf Papier zehnseitige Arbeit ist bei anständiger Schrift mindestens 15 Bildschirmseiten hoch (ohne Fußnoten). Ständiges Hoch- und Runterspringen stört jeden Lesefluss, weil man sich immer neu orientieren muss. Damit werden aus Fuß- de facto Endnoten (Endnoten sind aber nicht dazu gedacht, parallel zum Text konsultiert zu werden, sondern als zusätzliches Angebot für vertiefende oder weitere Informationen, oder für Nerds;-), was ihren Sinn oft zerstört.

    Wesentlich effektiver finde ich in einem früheren Kommentar vorgeschlagene Prinzip von Randnoten. Seit geraumer Zeit verwende ich diese für meine alten Studienarbeiten (die ich in meine neue Seite übernommen habe), beispielsweise bei dieser Hausarbeit. Einfach an der Stelle der Fußnote die Existenz einer solchen vermerken (z.B. durch eckige Klammern oder Sternchen oder eine hochgestellte Zahl oder sonst ein passendes Zeichen) und danach die Fußnote im Quelltext direkt anschließen und als span-class ausweisen (diese definiert man in der css einfach als flow right, dann landet sie am rechten Rand; man kann sie auch so formatieren, dass sie neben dem eigentlichen Text steht und nicht wie bei meinem Beispiel in diesen eingeklinkt wird). Das Verfahren macht auch eine Übertragung aus beispielsweise Latex- oder Word-Dokumenten einfacher, da man sonst die Fußnoten erst mühsam aus dem Fließtext-Dokument zusammensuchen und am Ende der Internet-Version sammeln und dann händisch hin- und herverlinken müsste.

  6. 06) 08.04.2011
    David

    Du darfst das resultierende Layout nicht mit der logischen Auszeichnung im Quelltext vermischen. Beides ist absolut unabhängig voneinander. Die klassische Fußnote kann man nicht eins zu eins auf ein Weblayout übertragen, hier liegt vieleicht ein Definitionsproblem vor. Im Printlayout stehen die Bemerkungen innerhalb einer Seite jeweils auf der selben Seite unter dem Text um das umblättern zu vermeiden. Logisch stehen sie aber außerhalb des Textes, also davor oder dahinter. Mit deiner beschriebenen Methode gliederst Du die Bemerkungen lediglich optisch aus, was zum einen Orthographiefehler nach sich zieht, zum anderen den eigentlichen Vorteil, die Zusatzinformation zum besseren Lesefluss auszulagern, für Screenreader z.B. zu nichte macht. (Schau dir den Text mal ohne Stylesheet an.)

    Ein Weblayout hat den wunderbaren Vorteil, dass man nicht blättern muss. Endnoten sind also in diesem Kontext gleich Fußnoten und andersrum. Der zweite Vorteil ist, dass man mit Links beliebig und gezielt Textpassagen anspringen kann, was die Fußnoten quasi noch benutzerfreundlicher macht (der Blick muss nicht erst abschweifen.) Mit der :target-Pseudoklasse kann man den Blick gezielt auf die entsprechende Fußnote lenken.

    Beim Drucken eines langen HTML-Dokuments werden die Fußnoten erstmal zu Endnoten. Das ist aber nicht Problem des Markups sondern des Layouts. Hier wäre es vieleicht möglich, mit JavaScript eine Lösung zu finden, die die Endnoten aufteilt auf die jeweiligen Seiten. Das ist allerdings nicht ganz trivial, muss ich zugeben.

  7. 07) 15.05.2012
    Serkan

    eine nette lösung, aber bei einem Blog wo ma ständig news postet bzw täglich posts einstellt welche fast immer fußnoten gebrauchen (zumindest bei dem was ich meine) ist es sehr mühsam, diese ganzen codes in immer einzupflegen.

    aber trotzdem nett für einige mal.

  8. 08) 15.05.2012
    David

    Nun in dem Fall sollte man über eine Automatisierung nachdenken.

  9. 09) 03.05.2014
    Herbert

    Gibt es eigentlich html Editoren, die bei der Anwendung der Anker – Technik helfen?
    Ich denke an
    – die Nummerierung von Fußnoten (Kapitelweise oder fortlaufend)
    – Neunummerierung beim nachträglichen Einfügen einer weiteren Fußnote
    – das automatische Einfügen von Anker und backlink
    Nehmen wir mal an,
    – es gibt einen ASCII Text mit {Derartigen Anmerkungen}
    – oder ein OO Writer Dokument mit Fußnoten das es als html zu formatieren gilt.
    Es wäre mir eine große Hilfe, wenn da jemand etwas kennen würde.

  10. 10) 19.05.2014
    David

    Hallo Herbert, ich kenne keinen HTLM-Editor (WYSIWYG-Editor) der sowas in dem Umfang anbietet. Vermutlich ist das der falsche Anwendungsfall. Vielleicht gibt es da aus der E-Book Richtung etwas?

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

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe 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=""> <s> <strike> <strong>

Dieser Artikel wurde auf folgenden Seiten verlinkt

  1. 2. April 2011: Fußnoten in HTML – Der Schockwellenreiter