HTML Heading Checker
Was die Überschriftenliste über die Seite verrät
Zwischentitel, Ebenen, Reihenfolge: was h1 bis h6 im HTML zeigen.
Gliederung sichtbar machen
Der Heading Checker zeigt die zweite Ansicht Ihrer Seite
Im Layout wirkt jeder Titel plausibel. Die Überschriftenliste zeigt, welche Struktur tatsächlich im HTML steht – und an welcher Stelle sie abreißt.
Was im Browser zu sehen ist
1 Rad & Tat
2 Werkstatt
A Rahmenbau
Stahlrahmen nach Maß, von der Skizze bis zur Probefahrt.
4 Materialien
Rohrsätze, Lötverfahren und Oberflächen.
2 Mehr
Was der Checker ausgibt
- 1
H1Rad & Tat - 2
H2Werkstatt - A„Rahmenbau“ fehlt
- 4
H4Materialien - 2
H2Mehr
Nicht in der Liste „Rahmenbau“ sieht wie ein Titel aus, ist aber ein Absatz.
Ebene übersprungen Unter H2 beginnt eine H4, ohne dass eine H3 den Bereich eröffnet.
Menschliches Urteil Der Checker findet „Mehr“. Ob das den Abschnitt beschreibt, prüfen Sie selbst.
So lesen Sie die Liste
Tiefere Ebenen eröffnen Unterabschnitte. Eine H4 direkt nach H2 lässt dabei eine Stufe aus. Der Rückweg von H4 zu H2 ist dagegen schlüssig: Er beendet die Unterabschnitte.
- Text
- Beschreibt jede Überschrift den folgenden Abschnitt?
- Ebene
- Steigt die Gliederung beim Öffnen höchstens um eine Stufe?
- Vollständigkeit
- Fehlen sichtbare Zwischentitel in der Liste?
Ohne Erweiterung
Heading Checker als Lesezeichen
Legen Sie ein neues Lesezeichen mit dem Namen „Gliederung“ an. Fügen Sie die gesamte Zeile als URL ein. Ein Klick blendet die Liste ein, der nächste entfernt sie.
javascript:(function(){var o=document.getElementById('gliederung');if(o){o.remove();return;}var a=[],q='h1,h2,h3,h4,h5,h6';document.querySelectorAll(q).forEach(function(h){a.push(h.tagName+' '+h.textContent.trim().slice(0,70));});var b=document.createElement('pre');b.id='gliederung';b.setAttribute('role','dialog');b.setAttribute('aria-label','Überschriftenliste');b.style.cssText='position:fixed;top:1rem;right:1rem;z-index:99999;max-width:calc(100% - 2rem);max-height:80vh;overflow:auto;padding:1rem;background:white;color:black;border:2px solid black;font:16px/1.5 monospace;white-space:pre-wrap';b.textContent=a.join('\n')||'Keine HTML-Ueberschrift gefunden';document.body.appendChild(b);})() Das Lesezeichen liest nur h1 bis h6 aus. Es bewertet weder die Formulierung noch visuell hervorgehobene Absätze.
Vertiefen
So prüfen Sie es
- Öffnen Sie die Zielseite und wählen Sie das Lesezeichen „Gliederung“.
- Vergleichen Sie die Ausgabe mit den sichtbaren Zwischentiteln von oben nach unten.
- Prüfen Sie ausgelassene Ebenen nur dort, wo ein tieferer Unterabschnitt beginnt.
- Lesen Sie jeden Titel zusammen mit dem folgenden Inhalt: Passt die Aussage?
Aus dem Prüfbericht
Eine Regel, vier Fundstellen
Kritisch Vier Zwischentitel fehlen in der Liste Regel p-as-heading
Groß gesetzte Absätze erscheinen im Heading Checker nicht. Leiten sie einen Abschnitt ein, gehört an ihre Stelle eine echte Überschrift.
Zum Mitnehmen
Die Überschriftenliste, korrigiert
Ein Element getauscht, ein Sprung geschlossen.
Korrektur in 2 Schritten ansehen
Aus dem Absatz eine Überschrift machen
Die Klasse bleibt, damit die Gestaltung gleich aussieht. Der Checker listet danach „Fahrradrahmen“ als Überschrift der Ebene 3.
KorrekturvergleichSchritt 1 · HTML Vorher
<h2>Reparaturen</h2> <p class="titelzeile">Fahrradrahmen</p> <p>Risse im Rahmen schweißen wir nach Prüfung.</p>Nachher
<h2>Reparaturen</h2> <h3 class="titelzeile">Fahrradrahmen</h3> <p>Risse im Rahmen schweißen wir nach Prüfung.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie die Überschriftenliste erneut aus. Der Zwischentitel steht jetzt darin.
Den Ebenensprung schließen
Von h1 direkt auf h4 lässt zwei Ebenen leer. Die Ebene folgt der Gliederung, die Schriftgröße kommt aus dem CSS.
KorrekturvergleichSchritt 2 · HTML Vorher
<h1>Werkstatt Trave</h1> <h4>Reparaturen</h4> <h4>Ersatzteile</h4>Nachher
<h1>Werkstatt Trave</h1> <h2>Reparaturen</h2> <h2>Ersatzteile</h2>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie die Liste von oben durch. Die Ebenen steigen um höchstens eine Stufe.