Jan-Hinrich Fehlis

Überschriften sind kein Schmuck, sondern Struktur

Frag jemanden, der seine Website selbst pflegt, wozu Überschriften da sind, und die Antwort läuft fast immer aufs Gleiche hinaus: Sie sollen etwas hervorheben, größer machen, eine Seite auflockern. Überschriften als Schmuck. Aus dieser einen Annahme folgt fast alles Weitere von selbst – man wählt die Ebene danach, wie groß sie aussieht, und macht aus Fettschrift mal eben eine Überschrift, sobald die Optik passt.

Verfasst von

Jan-Hinrich Fehlis

Erschienen

Alle Beiträge

Das Problem: Eine Überschrift ist kein Schmuck, sondern ein Strukturelement. Sie sagt nicht „das hier ist wichtig“, sondern „hier beginnt ein neuer Abschnitt, und der gehört zu jenem“. Wer sie als Deko behandelt, baut eine Gliederung, die nicht zum Text passt – und merkt es nie, weil diese Gliederung im Browser unsichtbar bleibt. Andere merken den Unterschied sehr wohl – allen voran die Menschen, die auf diese Struktur angewiesen sind, um deine Seite überhaupt nutzen zu können. Genau um die geht es hier. Fangen wir trotzdem bei dir an, denn der Weg dorthin führt über deinen eigenen Text.

Stell dir ein Inhaltsverzeichnis vor

Beispiel einer Überschriften-Gliederung Eingerückte Baumstruktur: H1 als Titel der Seite; darunter eingerückt zwei H2-Hauptabschnitte; unter jedem H2 eingerückte H3-Unterabschnitte. Die Ebene ergibt sich aus der Position in der Struktur, nicht aus der Schriftgröße. GLIEDERUNG EINER SEITE H1 H2 H3 H3 H2 H3 Titel der Seite Hauptabschnitt Unterabschnitt Unterabschnitt Hauptabschnitt Unterabschnitt Die Ebene ergibt sich aus der Position in der Struktur – nicht aus der Schriftgröße.
Beispiel einer sauberen H1–H6-Gliederung.

Jede Überschriftenebene hat eine Bedeutung, so wie die Gliederung in einem Buch:

  • H1 ist der Titel der Seite. Einmal pro Seite, mehr nicht.
  • H2 sind die Hauptkapitel.
  • H3 sind Unterkapitel innerhalb eines H2.
  • Und so weiter bis H6, das man in der Praxis selten braucht.

Das kennst du schon, auch wenn du es nie so genannt hast. Schreib in Google Docs mit den echten Überschriften-Stilen (oben in der Leiste: „Überschrift 1“, „Überschrift 2“ …) – und links baut sich automatisch eine Gliederung auf. Genau dieses Prinzip steckt hinter H1 bis H6. Die Ebenen sagen, was wozu gehört.

Eine H3 direkt nach einer H1, ohne H2 dazwischen, ist wie ein Buch, das von Kapitel 1 zu Abschnitt 1.2.3 springt. Technisch geht das. Verständlich ist es nicht.

Die Hierarchie steckt meist schon im Text

Der schwierigere Teil kommt vor dem Editor: die Gliederung im eigenen Text überhaupt zu erkennen. Die meisten Texte haben längst eine – ein paar Hauptgedanken, darunter Details, Beispiele, Belege. Sie ist nur nicht sichtbar gemacht.

Ein einfacher Test: Lies deinen Text und sortier ihn in zwei, drei Hauptthemen. Das werden deine H2. Was darunter ins Detail geht, wird zur H3. Fällt dir das schwer, liegt das selten an den Überschriften – meistens ist der Text selbst noch nicht klar sortiert. Die Überschrift deckt das nur auf.

Und genau dieses Sichtbarmachen ist der eigentliche Gewinn. Kaum jemand liest eine Webseite von oben bis unten. Man scannt – überfliegt, sucht den Absatz, der zur eigenen Frage passt, steigt dort ein. Überschriften sind die Einstiegspunkte dafür. Ohne sie bleibt eine Wand aus Text, durch die man sich durcharbeiten muss. Mit ihnen finden deine Leser:innen in Sekunden, was sie suchen.

Für manche ist Struktur kein Komfort, sondern die Voraussetzung

Genau hier wird aus einer netten Sache eine entscheidende. Was für die meisten das Scannen bequemer macht, ist für andere der einzige Weg hinein. Menschen, die einen Screenreader nutzen – etwa weil sie blind oder stark sehbeeinträchtigt sind – lassen sich eine Seite nicht von oben bis unten vorlesen. Das wäre, als müsstest du jede Website komplett anhören, bevor du weißt, ob das Gesuchte überhaupt drinsteht.

Stattdessen springen sie von Überschrift zu Überschrift. Der Screenreader gibt eine Liste aller Überschriften aus – das Inhaltsverzeichnis von eben, nur hörbar – und über die navigiert man die Seite. Voraussetzung: Es sind richtige Überschriften.

Und da rächt sich die Deko-Sicht. Wenn du Text einfach fett und etwas größer machst, damit er „wie eine Überschrift aussieht“, bleibt er technisch ein ganz normaler Absatz. Für dich sieht das aus wie eine Überschrift. Für den Screenreader existiert sie nicht. Sie taucht in keiner Liste auf, lässt sich nicht ansteuern. Sie ist unsichtbar – und mit ihr der Abschnitt, den sie eigentlich erschließen sollte.

Dass eine Überschrift eine echte Überschrift sein muss und ihren Abschnitt benennen soll – „Mehr Infos“ reicht nicht –, steht so auch in den Barrierefreiheits-Regeln, an denen sich das BFSG orientiert. Aber der eigentliche Grund sitzt nicht in einer Vorschrift. Er sitzt bei den Menschen, die sonst vor deiner Seite stehen wie vor einer Tür ohne Klinke.

Und was Maschinen daraus lesen

Kurz, weil hier viel übertrieben wird: Suchmaschinen nutzen Überschriften, um Aufbau und Thema einer Seite zu verstehen. Eine saubere Hierarchie hilft dabei, und wenn dein wichtigster Begriff natürlich in einer H2 vorkommt, schadet das nicht. Dasselbe gilt zunehmend für KI-Assistenten: Sie lesen dieselbe Gliederung, um Passagen zu erfassen und zu zitieren – wie stark das wirkt, ist noch nicht sauber belegt, aber es ist exakt die Struktur, von der Menschen und Screenreader ohnehin profitieren. Aber die H1 ist kein magischer Ranking-Hebel, und mehrere H1 ruinieren dein Ranking nicht – auch wenn sich dieser Mythos hält. Das ist ein netter Nebeneffekt von guter Struktur, mehr nicht.

Die häufigsten Fehler

Ich sehe diesen Denkfehler überall – bei Firmenkund:innen im WordPress-Editor, in Google Docs, in praktisch jedem System. Zuletzt wieder, als ich einer Freundin beim Aufbau ihres digitalen Archivs geholfen habe. Egal, womit man arbeitet, vier Varianten kommen besonders oft vor:

  1. Ebene nach Größe wählen. H3 genommen, weil H2 zu groß wirkt. Wie groß etwas aussieht, ist eine Frage des Designs – nicht der Überschriftenebene.
  2. Fett statt Überschrift. Sieht gleich aus, ist es aber nicht – und für alle, die per Überschrift navigieren, schlicht nicht vorhanden.
  3. Ebenen überspringen. Von H2 direkt auf H4. Das bricht die Gliederung und verwirrt beim Navigieren.
  4. Zweite H1 im Text. In WordPress ist der Beitragstitel meist schon die H1. Setzt du im Inhalt nochmal eine, hast du plötzlich zwei Titel.

Dos und Don’ts zum Mitnehmen

Do:

  • Wähle die Ebene danach, wo der Inhalt in der Gliederung steht – nicht danach, wie er aussehen soll.
  • Nutze das echte Überschriften-Menü im Editor: in WordPress den Block „Überschrift”, in Google Docs den Stil-Wähler.
  • Schreib Überschriften, die ihren Abschnitt beschreiben.

Don’t:

  • Keine Ebene wählen, nur weil sie hübscher aussieht.
  • Keine Überschrift mit Fettschrift faken.
  • Keine Ebene überspringen, keine zweite H1 setzen.

Und falls dir das Aussehen einer Überschrift nicht gefällt – zu groß, zu viel Abstand, falsche Farbe: gute Nachricht. Das ist ein Design-Thema, kein Struktur-Thema. Solche Dinge legt man einmal zentral im Design der Seite fest, dann passen sie überall. Du musst die Struktur nicht verbiegen, damit es schön wird. Beides geht gleichzeitig.

Stell dir beim nächsten Mal kurz das Inhaltsverzeichnis vor, bevor du eine Überschrift setzt. Passt die Ebene da hinein? Dann passt sie auch auf der Seite. Und nebenbei sorgst du dafür, dass die Menschen mitlesen können, für die eine klare Struktur keine Komfortfrage ist, sondern die Bedingung. Dieselbe Handbewegung – zweimal Gewinn.