Heading Structure Analyzer

Den Überschriftenstruktur-Analysator verwenden

1. Inhalt einfügen - der Textbereich akzeptiert rohes HTML (mit <h1> bis <h6>-Elementen) oder Markdown (mit #, ##, ###-Syntax). Der Analysator erkennt das Format automatisch.
2. Auf "Analysieren" klicken - das Tool parst die Eingabe, extrahiert jede Überschrift, zeichnet ihre Ebene und ihren Text auf und erstellt einen Baum, der die Verschachtelung nach Ebene widerspiegelt.
3. Den Hierarchiebaum lesen - jede Überschrift erscheint auf ihrer Verschachtelungsebene, mit Warnungen, wenn die Struktur Ebenen überspringt (z. B. H2 direkt zu H4) oder mehrere H1s enthält.
4. Das Problem-Panel durchsuchen - es hebt drei Problemklassen hervor: mehrere H1s, übersprungene Ebenen und leerer oder doppelter Überschriftentext.
5. Upstream bearbeiten und erneut ausführen - die Ausgabe aktualisiert sich bei jedem Analysieren-Klick; iteriere, bis der Baum natürlich als Gliederung deines Inhalts lesbar ist.

Was der Parser tut

Für HTML-Eingabe verwendet der Analysator den DOMParser des Browsers, um ein Dokument-Fragment zu erzeugen, dann fragt er alle h1, h2, h3, h4, h5, h6-Elemente in Dokumentreihenfolge ab. Das erfasst Überschriften innerhalb von <article>-, <section>- und <main>-Wrappern, die ein naiver Regex verfehlen würde. Für Markdown-Eingabe tokenisiert er Zeile für Zeile und gleicht ^#{1,6}\\s+ am Zeilenanfang ab, um Überschriften-Ebenen zu identifizieren.

Die Hierarchieprüfung geht die Überschriftenliste in Reihenfolge durch und verfolgt die aktuelle Ebene. Ein Abfall von H2 zu H4 löst eine "übersprungene Ebene"-Warnung aus, weil es ein fehlendes H3 dazwischen impliziert. Mehrere H1s lösen eine separate Warnung aus, da durch HTML5-Konvention jedes Dokument ein einzelnes H1 hat, das das Hauptseitenthema darstellt - obwohl der HTML5-Gliederungsalgorithmus technisch mehrere H1s innerhalb von <section>-Elementen erlaubt, implementieren Browser, Screenreader und Suchmaschinen diesen Gliederungsalgorithmus nicht. Die praktische Regel bleibt: ein H1 pro Seite.

Wann man ein Überschriften-Audit durchführen sollte

• Auditieren einer übernommenen Site oder eines CMS, wo frühere Autoren Überschriften fürs Styling statt für die Struktur verwendet haben - oft erscheint H3 als Hervorhebung im Fließtext oder H1 auf jedem Abschnittsheader.
• Zugänglichkeit prüfen - Screenreader-Benutzer navigieren Seiten über Überschriftenlisten (JAWS: Einfüge+F6, NVDA: H-Taste), und eine kaputte Hierarchie macht Inhalt nicht navigierbar.
• Inhaltsmigrationen zwischen CMS validieren, wo die Überschriften-Tag-Zuordnung still brechen kann (Markdown #### konvertiert zu H3 statt H4 ist eine echte Fehlerklasse).
• Debuggen, warum der Rich-Snippet einer Seite fehlt - Google extrahiert manchmal Inhaltsverzeichnis-Sitelinks aus der Überschriftenstruktur und schlecht strukturierte Seiten verlieren diese Funktion.
• Content-Autoren den Unterschied zwischen semantischer Struktur und visuellem Styling beibringen, indem man ihnen den Baum ihrer eigenen Seite zeigt.

Überschriften-Fallstricke in der Praxis

• Überschriften als Styling-Abkürzungen verwenden - "dieser Abschnitt muss größer aussehen, also werde ich H3 verwenden, auch wenn es keine Abschnittsüberschrift ist" - das bricht die Gliederung für alle nachgelagerten Verbraucher.
• Leere Überschriften - <h2></h2> durch einen CMS-Template-Fehler erscheint als strukturelle Lücke. Screenreader kündigen "Überschrift Ebene 2, leer" an.
• Doppelter Überschriftentext - drei H2s, die alle "Überblick" heißen, erschweren die Navigation und deuten darauf hin, dass der Autor keine variierenden Unterabschnitt-Beschriftungen verwendet hat.
• H1 innerhalb von <header> vs. <main> - manche Templates setzen den Site-Logo-Text in ein H1 im Header und den Artikeltitel in ein H1 im Main, was zwei H1s pro Seite ergibt. Wähle eines (typischerweise den Artikeltitel).
• H1 komplett überspringen - eine Seite bei H2 beginnen passiert auf Templates, wo das CMS den Titel außerhalb des Inhaltsbereichs einfügt und Autoren annehmen, H2 sei die oberste Ebene. Die Seite hat dann kein H1.
• Überschriften in interaktiven Widgets verschachtelt - Tabs, Akkordeons und modale Dialoge enthalten manchmal H2s, die standardmäßig verborgen sind. Das DOM hat sie; die Hierarchieprüfung zählt sie; Benutzer sehen sie möglicherweise nicht. Überlege, ob sie überhaupt in der Seiten-Gliederung gehören.

Wofür Überschriften in HTML, Barrierefreiheit und SEO sind

Überschriften bedienen drei Zielgruppen. Für CSS sind sie typografische Anker mit impliziter visueller Hierarchie. Für assistive Technologien sind sie der primäre Navigationsmechanismus: Screenreader ermöglichen es Benutzern, von Überschrift zu Überschrift mit einem Tastendruck zu springen, und kündigen die Ebene an. Für Suchmaschinen sind Überschriften ein Inhaltsstruktur-Signal: Google Search Central sagt "Überschriften-Tags verwenden, wo es sinnvoll ist" und warnt davor, sie rein fürs Styling zu verwenden. Überschriften fließen auch in Googles Passage-Ranking ein, das spezifische Abschnitte langer Seiten in SERPs aufzeigt. WCAG 2.1 Erfolgskriterium 1.3.1 erfordert semantische Struktur einschließlich korrekter Überschriftenhierarchie für AA-Konformanz.

Alternativen und ergänzende Prüfungen

Browser-Erweiterungen wie axe DevTools, Lighthouse und WAVE prüfen Überschriftenhierarchie zusammen mit Dutzenden anderer Zugänglichkeitsprobleme. Für das Crawlen einer gesamten Site extrahieren Screaming Frog und Sitebulb Überschriftendaten pro URL. Für Live-Seitendebugging zeigt das Zugänglichkeits-Panel in Chrome-DevTools den berechneten Baum. Dieser Analysator gewinnt bei unveröffentlichtem Inhalt oder Markdown-Entwürfen; er deckt keine anderen Zugänglichkeitsprobleme ab, also kombiniere ihn mit einem vollständigen Audit vor dem Start.