Inhaltsverzeichnis-Generator für HTML und Markdown | We.Inc
Füge einen Artikel in HTML oder Markdown ein und erhalte ein verschachteltes Inhaltsverzeichnis mit Ankerlinks, ids für deine Überschriften und CSS für eine Sticky-Sidebar. In deinem Browser.
Inhaltsverzeichnis-Generator
Dieser Generator liest die Überschriften deines Artikels, gibt jeder eine eindeutige id und baut eine verschachtelte Liste von Sprunglinks, die darauf zeigen. Füge HTML oder Markdown ein, wähle die gewünschten Überschriftenebenen und kopiere einen fertigen nav-Block, eine Markdown-Liste oder dein HTML mit bereits ergänzten Anker-ids.
Was du einfügst und was du bekommst
Eingabe
Überschriften gelesen aus
Ausgaben
HTML
<h1>- bis <h6>-Elementen
Nav-HTML, Markdown-Liste, Artikel mit ergänzten ids
Markdown
Zeilen, die mit # bis ###### beginnen
Nav-HTML, Markdown-Liste
Vorhandene ids
id="..." oder {#custom-id}
Bleiben unverändert
Wiederholte Überschriften
Gleicher Text zweimal
Zweite id bekommt -1, dann -2
Lange Leitfäden lassen sich leichter überfliegen und teilen, wenn Leser zu einem Abschnitt springen können. Die Links geben außerdem jedem Teil der Seite eine eigene Adresse, sodass du jemanden direkt zu dem Absatz schicken kannst, den er braucht.
Wie die Anker-ids entstehen
Der Text jeder Überschrift wird kleingeschrieben, Satzzeichen werden entfernt und Leerzeichen werden zu Bindestrichen, sodass aus Layout wählen layout-wählen wird. Buchstaben mit Akzenten und nicht lateinische Schriften bleiben erhalten, statt entfernt zu werden.
Eine id muss im Dokument eindeutig sein und darf keine Leerzeichen enthalten. Wenn derselbe Überschriftentext zweimal vorkommt, bekommt die zweite Kopie -1 angehängt, die dritte -2, damit jeder Link genau ein Ziel hat.
Markdown-Plattformen erzeugen eigene ids für Überschriften, und ihre Regeln weichen leicht ab. Wenn du Markdown dort veröffentlichst, wo bereits ids ergänzt werden, prüfe nach dem Veröffentlichen einen Link; bei HTML, das du selbst kontrollierst, nutze die Artikelausgabe, damit die ids exakt übereinstimmen.
Wo das Inhaltsverzeichnis hingehört
Setze das Inhaltsverzeichnis nach die Einleitung, nicht davor, damit Leser zuerst erfahren, worum es auf der Seite geht. Auf breiten Bildschirmen hält eine Sticky-Sidebar es beim Scrollen in Reichweite.
Wenn deine Website einen fixierten Header hat, verdeckt er die Überschrift nach einem Sprunglink. Die Eigenschaft scroll-margin-top fügt über dem Ziel Abstand hinzu, wenn der Browser dorthin scrollt, und behebt das ohne JavaScript.
Füge deinen Artikel ein. Das Tool erkennt HTML, wenn es Überschriften-Tags sieht; andernfalls liest es Markdown-Überschriften und überspringt eingezäunte Codeblöcke.
Wähle die oberste und die tiefste Überschriftenebene, die aufgenommen werden soll. Die meisten Artikel listen nur H2 und H3.
Wähle eine Aufzählung oder eine nummerierte Liste und lege das Label fest, das Screenreader für die nav ansagen.
Kopiere den Inhaltsblock. Bei HTML-Eingabe kopierst du zusätzlich den Artikel mit ids, damit jeder Link sein Ziel hat.
Halte Überschriften kurz und konkret; sie werden sowohl zum Linktext als auch zum Anker in der Adresszeile.
Überspringe keine Ebenen (eine H4 direkt unter einer H2). Das Tool verschachtelt sie trotzdem, aber Screenreader-Nutzer navigieren nach Überschriftenebene.
Wenn du eine Überschrift änderst, ändert sich ihre id, und Links, die geteilt wurden, gehen kaputt. Setze eine feste id, wenn ein Abschnitt von anderswo verlinkt wird.
Nimm die H1 der Seite nicht ins Inhaltsverzeichnis auf; der Leser ist bereits oben.
Häufige Fragen
Wie erstelle ich ein klickbares Inhaltsverzeichnis in HTML?
Gib jeder Überschrift eine id und verlinke sie dann mit einer Raute: <a href="#set-a-budget">Set a budget</a> springt zum Element mit id="set-a-budget". Pack die Links in ein nav-Element mit einer Liste darin. Dieses Tool schreibt sowohl die ids als auch die Liste.
Warum landet mein Sprunglink hinter dem Header?
Ein fixierter oder Sticky Header verdeckt den oberen Rand des Fensters, und der Browser scrollt die Überschrift genau an diesen oberen Rand. Füge Überschriften scroll-margin-top hinzu, etwas größer als die Höhe des Headers, dann stoppt die Überschrift darunter.
Kann ich das Inhaltsverzeichnis sticky machen?
Ja. Setze die nav in eine Sidebar-Spalte und gib ihr position: sticky mit einem top-Wert. Sie scrollt normal, bis sie diesen Abstand erreicht, und bleibt dann stehen, solange ihre Spalte auf dem Bildschirm ist. Das Beispiel unten zeigt das CSS.
Hilft ein Inhaltsverzeichnis bei SEO?
Es hilft Lesern, Abschnitte zu finden, und gibt jedem Abschnitt eine verlinkbare Adresse. Suchmaschinen zeigen manchmal Sprunglinks zu Abschnitten an, entscheiden aber selbst, wann; keine Einstellung garantiert das.
Sticky-Sidebar mit Inhaltsverzeichnis
Ein zweispaltiges Layout, bei dem das Inhaltsverzeichnis sichtbar bleibt und Überschriften nicht unter einem fixierten Header verschwinden.
Sticky nav plus Abstand für Überschriften
Der Rahmen ist kurz, also scrolle darin: Die Spalte mit dem Inhaltsverzeichnis bleibt fixiert, während sich der Artikel bewegt.
Inhaltsverzeichnis erstellen
Füge einen Artikel als HTML oder Markdown ein. Die Überschriften werden gelesen, erhalten eindeutige Anker-ids, werden nach Ebene verschachtelt und in eine HTML-nav, eine Markdown-Liste und bei HTML-Eingabe in eine Kopie deines Artikels mit den fehlenden ids umgewandelt.
Inhalt
Artikel (HTML oder Markdown)
Ab Ebene
Bis Ebene
Nav-Label
Listenstil
Aufzählungspunkte
Nummern
Gelesen als {format}: {n} Überschrift gefunden, {m} im Bereich.
Gelesen als {format}: {n} Überschriften gefunden, {m} im Bereich.
Keine Überschriften in diesem Bereich. Erweitere die Ebenen oder prüfe, ob Überschriften mit # beginnen oder h-Tags verwenden.