jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose Inhaltsverzeichnis-Anker-Generator

Füge HTML-Überschriften ein und erhalte ein verschachteltes Inhaltsverzeichnis mit Ankerlinks.

Tool wird geladen...

Was ist Inhaltsverzeichnis-Anker-Generator?

Ein Inhaltsverzeichnis ist eine verlinkte Liste von Überschriften, die es Lesern ermöglicht, zu Abschnitten innerhalb einer langen Seite zu springen. Ankerlinks verwenden das id-Attribut auf jeder Überschrift, um tief verlinkbare URLs zu erstellen. Für statische Seiten mit langen Artikeln verbessert ein Inhaltsverzeichnis die Navigation, Zugänglichkeit und das Leserengagement.

Kurze Antwort

Generieren Sie ein verschachteltes Inhaltsverzeichnis mit Ankerlinks aus Überschriften-Tags in Ihrem HTML. Jeder Inhaltsverzeichnis-Eintrag verlinkt zu einer slugifizierten ID auf der entsprechenden Überschrift für einfache Seitennavigation.

Last updated: 2026-06-11

Einschränkungen

  • Das Tool generiert das Inhaltsverzeichnis-Markup und die Überschriften-id-Werte separat. Sie müssen die generierten id-Attribute manuell zu den Überschriften-Tags hinzufügen.
  • Überschriften ohne Textinhalt oder in nicht-semantischen Containern werden möglicherweise nicht korrekt extrahiert.
  • Das generierte Inhaltsverzeichnis verwendet flache Verschachtelung basierend auf Überschriftenebenen. Benutzerdefiniertes CSS kann für mehrstufige Einrückungen erforderlich sein.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Fügen Sie das HTML Ihres Artikels oder Seiteninhalts in den Eingabebereich ein.
  2. Wählen Sie, welche Überschriftenebenen im Inhaltsverzeichnis enthalten sein sollen, z.B. h2 bis h4.
  3. Überprüfen Sie die generierte verschachtelte Liste und klicken Sie auf einen Link, um das Ankerformat zu überprüfen.
  4. Kopieren Sie das Inhaltsverzeichnis-HTML und fügen Sie es oben in Ihren Artikel ein, dann fügen Sie die id-Attribute zu Ihren Überschriften hinzu.

Wofür du es nutzen kannst

  • Ein Inhaltsverzeichnis zu einem langen Leitfaden mit 12 oder mehr Abschnitten hinzufügen.
  • Ankerlinks für eine Dokumentationsseite mit einer tiefen h2- und h3-Hierarchie erstellen.
  • Sprung-zu-Abschnitt-Links für eine mehrsegmentige Landingpage generieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Langer Leitfaden mit 12 Abschnitten

Ein Publikationsleitfaden zur Static-Site-Einrichtung deckt Installation, Konfiguration, Bereitstellung und Fehlerbehebung ab. Das Inhaltsverzeichnis listet jeden h2-Abschnitt mit einem Ankerlink auf.

Beispiel

Dokumentation mit h2/h3-Hierarchie

Eine API-Referenz verwendet h2 für Endpunktgruppen und h3 für einzelne Endpunkte. Das Inhaltsverzeichnis bewahrt die Verschachtelung.

Haufige Fehler

  • Ein Inhaltsverzeichnis mit Ankerlinks generieren, aber keine entsprechenden id-Attribute zu den ursprünglichen Überschriften hinzufügen, was die Links funktionsunfähig macht.
  • Versuchen, ein Inhaltsverzeichnis aus eingefügtem Inhalt ohne Überschriften-Tags zu generieren, was eine leere Liste erzeugt.
  • Generieren eines Inhaltsverzeichnisses mit inkonsistenten Überschriftenebenen wie Sprung von h2 zu h4 ohne h3.

Überprüfung

  1. Klicken Sie auf jeden Inhaltsverzeichnis-Link und bestätigen Sie, dass die Seite zum korrekten Überschriftenabschnitt scrollt.
  2. Überprüfen Sie die Seiten-URL nach dem Klicken auf einen Inhaltsverzeichnis-Link, um zu bestätigen, dass der Anker-Fragment korrekt in der Adressleiste erscheint.

FAQ

Fragen zu Inhaltsverzeichnis-Anker-Generator

Fügt dieses Tool id-Attribute zu meinen vorhandenen Überschriften hinzu?

Es generiert die id-Werte als Teil der Inhaltsverzeichnis-Links. Sie müssen diese id-Attribute manuell oder über Ihren Site-Generator zu den entsprechenden Überschriften-Tags hinzufügen.

Sollte jede Seite ein Inhaltsverzeichnis haben?

Nur Seiten mit genügend Inhalt, um Navigation zu rechtfertigen, profitieren von einem Inhaltsverzeichnis. Eine Seite mit weniger als drei oder vier Überschriften benötigt normalerweise keins.

Welche Überschriftenebenen sollte das Inhaltsverzeichnis enthalten?

Nehmen Sie h2 bis h3 oder h2 bis h4 für die meisten Artikel auf. Beginnen Sie mit h2, da h1 normalerweise der Seitentitel ist.

Wie gehe ich mit doppelten Überschriftstexten bei der Generierung von Ankerlinks um?

Wenn zwei oder mehr Überschriften identischen Text haben, müssen die generierten Anker-IDs eindeutig sein. Dieses Tool generiert eindeutige Anker, indem es einen Zähler an doppelte IDs anhängt.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren