[Tutorial] Klickbares Inhaltsverzeichnis in Blogposts

Samstag, 2. Februar 2019 | 14 Kommentare
Code-Editor

Wer einmal richtig in den Schreibflow gekommen ist, kennt das sicher: Der Text wird länger und länger und länger ... Und plötzlich ist er so lang, dass nicht einmal Zwischenüberschriften wirklich helfen, ihn gut lesbar zu machen.
Wer das noch nicht von sich selbst kennt, dem sei als prominentestes Beispiel für lange Online-Texte Wikipedia empfohlen. Viele Artikel sind so lang, dass man theoretisch viel scrollen müsste. Theoretisch! Denn Wikipedia behilft sich mit einem Mittel, das wir bestens aus Büchern kennen: dem Inhaltsverzeichnis.
Zu Beginn eines jeden Artikels steht ein solches ein- und ausklappbares Verzeichnis, das mit allen Zwischenüberschriften des Artikels verlinkt ist. Ein Klick und man landet beim passenden Abschnitt. Super, oder?! Und ganz einfach nachzubauen!

Die grundlegende Funktionsweise

In Büchern ist das Inhaltsverzeichnis an Seitenzahlen geknüpft. Da wir online meistens keine Seitenzahlen haben, müssen wir uns anders behelfen. Das Schlüsselwort heißt Sprungmarke (auch Anker oder Anchor). Eine solche Sprungmarke ist quasi die Seitenzahl des Online-Textes. Mit ihr definieren wir die Stellen, zu denen uns das Inhaltsverzeichnis bringen soll. Eine Sprungmarke besteht aus zwei Teilen: Sprungziel und Verweis.

Vorbereitung

Sprungziele und Verweise werden mit HTML geschrieben. Damit euer Blogeditor erkennt, dass ihr HTML schreibt, müsst ihr im Editor in die HTML-Umgebung wechseln.

Blogspot-Nutzer*innen: Ihr habt oben links die Wahl zwischen Verfassen (Standard) und HTML. Klickt auf HTML.

Wordpress-Nutzer*innen: Ihr habt die Wahl zwischen Visuell (Standard) und Text. Klickt auf Text. (Falls sich an den Bezeichnungen im neuen Editor etwas geändert hat, meldet euch gern!)

1. Sprungziele definieren

Sprungziele sind all die Zwischenüberschriften, Textstellen o.ä., die später über das Inhaltsverzeichnis erreichbar sein sollen. Sie erhalten eine id, die wir später zum Verlinken nutzen.

Ist das Sprungziel eine Zwischenüberschrift, sieht das so aus:
<h2 id="Einleitung">Einleitung</h2>
Die id muss dabei nicht die gleiche Bezeichnung haben wie die Überschrift selbst. Achtet darauf, dass die id möglichst nur ein Wort oder eine Wort-Zahl-Kombinaten ohne Sonderzeichen oder Leerzeichen ist. Das erleichtert euch nachher das Verlinken.

Ist das Sprungziel ein normaler Text, sieht das so aus:
<span id="Textstelle1">Das ist eine Textstelle</span>

Definiert auf diese Weise erst einmal alle Sprungziele in eurem Beitrag, bevor ihr weitermacht.

2. Verweise erstellen

Eine Liste aus Verweisen ist das Inhaltsverzeichnis. Verweise sehen nicht viel anders aus als gewöhnliche Links in HTML-Schreibweise.
Einziger Unterschied: Statt eines kompletten Links schreibt ihr eine Raute (#) und die id des jeweiligen Sprungziels zwischen die Anführungszeichen.

Ein Inhaltsverzeichnis sieht damit so aus:
<a href="#Einleitung">Einleitung</a><br />
<a href="#Erstens">Erste Unterüberschrift</a><br />
<a href="#Zweitens">Zweite Unterüberschrift</a><br />
<a href="#Drittens">Dritte Unterüberschrift</a><br />
(Das br-Tag sorgt für einen Zeilenumbruch.)
Habt ihr das geschrieben, ist euer klickbares Inhaltsverzeichnis fertig.

Achtung!
Wechselt, nachdem ihr die Verweise geschrieben habt, im Editor nicht nochmal zu Verfassen bzw. Visuell.
Andernfalls fügt euer Blogsystem vor der Raute automatisch den Link ein, unter dem euer Post abrufbar ist. Sollte euer Post bereits veröffentlicht sein, ist das meist kein Problem. Wenn ihr den Post aber noch nicht veröffentlicht habt, steht dort der Link zu eurem Editor. Wenn ihr den Post dann veröffentlicht und jemand klickt auf den Link im Inhaltsverzeichnis, landet er/sie bei eurem Editor (bzw. bekommt eine Fehlermeldung, weil er/sie nicht die Rechte hat, um den Editor einsehen zu können).

Zum Seitenanfang springen

Gerade bei langen Seiten kann es hilfreich sein, ab und an einen Link zum Seitenanfang einzufügen. Diesen Link könnt ihr z.B. nach jedem größeren Abschnitt setzen.
Für solch einen Link gibt es eine standardisierte Sprungmarke:
<a href="#">Zum Anfang</a>

Statt "Zum Anfang" könnt ihr auch jede x-beliebige andere Bezeichnung wählen. Wichtig ist nur, dass ihr nach der Raute nichts weiter schreibt.

Inhaltsverzeichnis ein- und ausklappen

Zu Beginn hatte ich geschrieben, dass man bei Wikipedia das Inhaltsverzeichnis ein- und ausklappen  kann. Auch das können wir auf unseren Blogs ganz einfach nachbauen. Dafür verwenden wir das details-Tag, mit dem man Inhalte verbergen kann.
Innerhalb des details-Tag kann man noch den Tag summary setzen, mit dem man eine Überschrift vergibt, die immer sichtbar ist. Egal, ob das Feld nun ein- oder ausgeklappt ist.

Am Beispiel unseres Inhaltsverzeichnisses sieht das so aus:
<details open="">
<summary>Inhaltsverzeichnis</summary><br />
<a href="#Einleitung">Einleitung</a><br />
<a href="#Erstens">Erste Unterüberschrift</a><br />
<a href="#Zweitens">Zweite Unterüberschrift</a><br />
<a href="#Drittens">Dritte Unterüberschrift</a><br />
</details> 

Damit bekommt ihr ein auf- und zuklappbares Inhaltsverzeichnis.
Ergänzend habe ich noch das Attribut open="" in das Starttag geschrieben. Dieses Attribut sorgt dafür, dass das Inhaltsverzeichnis immer zuerst ausgeklappt ist. Mit einem Klick auf "Inhaltsverzeichnis" kann man es einklappen. Wer möchte, dass das Inhaltsverzeichnis immer zuerst eingeklappt ist, löscht das Attribut.

Im Gespräch

Das war das erste HTML-Tutorial auf Pergamentfalter!
Lasst mich gern in den Kommentaren wissen, wie ihr damit zurechtkommt oder ob noch Fragen offen sind.

Falls ihr Wünsche für weitere HTML- oder CSS-Tutorials habt, sind die auch sehr gern gesehen!

14 Kommentare

  1. Wow dass nenne ich mal klar erklärt!
    Vielen Dank und liebe Grüsse
    Manu

    AntwortenLöschen
  2. Mit solchen Sprüngen habe ich schon gearbeitet. Die Kapitel habe ich noch nicht zusammengeklappt. Das werde ich machen, wenn ich das nächste mal einen langen Beitrag habe.
    Danke für den Tipp
    Grüße
    Silvia

    AntwortenLöschen
    Antworten
    1. Hallo Silvia,

      danke dir für deinen Kommentar! Dann mal viel Erfolg beim Umsetzen :)

      Liebe Grüße
      Sarah

      Löschen
  3. Hallöchen,
    klasse Tutorial! Ich wollte längst mal suchen, wie man so etwas in seinen Blogpost einbaut. Tatsächlich wusste ich aber einfach nicht, wonach ich suchen soll. Deshalb vielen, vielen Dank!
    Liebste Grüße, Kate
    #litnetzwerk

    AntwortenLöschen
  4. Vielen Dank für die Anleitung! Ich glaube, ich könnte das mittlerweile sogar bei meinem Rezensionsindex gebrauchen, ich hab da schon soooo viele Bücher drin, dass man ganz schön scrollen muss, um bei Z anzukommen :-)

    AntwortenLöschen
    Antworten
    1. Hallo Friedelchen,

      danke für deinen Kommentar! Stimmt, das könntest du mit dem details-Tag gut realisieren. Je nach dem, wie viele Rezensionen du hast, würde vielleicht auch ein Rezensionsindex Sinn machen, wie ich ihn hab. Die Anleitung gibt es bei Pusteblume?. Allerdings muss man dort un der Standardversion jeden Link 2x eintragen (einmal in die Liste für alle Rezensionen (sofern man die will) und einmal unter dem entsprechenden Buchstaben).

      Liebe Grüße
      Sarah

      Löschen
  5. Hey Sarah!
    Ich habe gerade deinen Blog entdeckt und finde es echt gut, dass du auch Tutorials machst. :) Ich kenn mich etwas aus mit HTML und CSS und lern immer gern was Neues dazu. Hier kannte ich schon die Befehle, aber nicht wie man sie so zusammenfügt, dass sie ein Inhaltsverzeichnis ergeben.
    Vielen Dank für den Post!
    Viele Grüße, Aurora von www.papiermosaik.blogspot.com

    AntwortenLöschen
    Antworten
    1. Hey Aurora,

      vielen Dank! Freut mich, wenn ich etwas weiterhelfen konnte :)

      Liebe Grüße
      Sarah

      Löschen
  6. Hallo Sarah,

    ich habe gerade dein Tutorial entdeckt und wollte dir dafür danken! Ich habe es gleich mal auf meinen Reziindex angewendet und tatsächlich wollte ich sowas eigentlich schon ewig haben, da HTML aber größtenteils noch eine Fremdsprache ist, blieb dieser Wunsch unerfüllt, und jetzt stolpere ich über dein einfaches Tutorial, das sich innerhalb weniger Minuten umsetzen ließ - vielen Dank dafür!!

    Liebe Grüße
    Dana

    AntwortenLöschen
    Antworten
    1. Hallo Dana,

      vielen Dank für deinen Kommentar! Freut mich, dass du es direkt umsetzen konntest. So hatte ich mir das gedacht/ erhofft :D

      Liebe Grüße
      Sarah

      Löschen
  7. Vielen Dank für diesen hilfreichen Beitrag. Ich habe inzwischen schon in einige Artikel das Inhaltsverzeichnis eingebaut.

    LG Kathrin

    AntwortenLöschen
    Antworten
    1. Hallo Kathrin,

      danke für deinen Kommentar! Freut mich, dass du es bereits erfolgreich nutzen konntest.

      Liebe Grüße
      Sarah

      Löschen

Vielen Dank für deinen Kommentar!

Hinweis: Mit dem Abschicken deines Kommentars akzeptierst du, dass der von dir geschriebene Kommentar und die personenbezogenen Daten, die damit verbunden sind (z.B. Username, E-Mailadresse, verknüpftes Profil auf Google/ Wordpress) an Google-Server übermittelt werden. Mehr Informationen dazu erhältst du in meiner Datenschutzerklärung und in der Datenschutzerklärung von Google.