HTML: Hinweise zu Überschriften und Hierarchien (Outlines)

Artikel vom 6. Januar 2007. ISSN 1614-3124, #30. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Dieser Artikel ist stellenweise veraltet.

Webstandardsbewusste Entwickler werden bei ihrer Arbeit tagtäglich mit Überschriftenhierarchien konfrontiert, aber eine gute »Outline« kann gerne zur Herausforderung werden. Das Weglassen von Hierarchieebenen wie beim Sprung von h1 zu h3 ist unschicklich, und Screenreader-Nutzer profitieren genauso wie Suchmaschinen von einer stimmigen Struktur. Strategien für gute Überschriftenhierarchien umfassen sowohl Tabus als auch Alternativen.

Allgemeines

Überschriften werden in HTML über die Elemente h1 bis h6 ausgezeichnet. Die HTML-Spezifikation sagt:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

Der Einsatz von Überschriften in einem Dokument lässt sich hierarchisch abbilden. Dazu ein einfaches Beispiel für eine Überschriftenhierarchie innerhalb eines fiktiven HTML-Dokuments:

<h1>Überschriften sind wunderbar</h1>
<h2>Einleitung</h2>
<h2>Vorteile</h2>
<h2>Nachwort</h2>

Der W3C-HTML-Validierer kann eine solche Hierarchie auf Wunsch (Optionen in der erweiterten Version: »Show Outline«) ausgeben.

Probleme: Übersprungene Überschriften und falsche Hierarchien

Davon abgesehen, dass manche Seitenbetreiber oder -entwickler bisher gerne noch gänzlich auf Überschriften oder gar den Gebrauch von Elementen gemäß ihrer Semantik verzichten, herrschen in der Praxis hauptsächlich zwei Probleme beim Einsatz von Überschriften vor:

Überschriftenebenen werden ausgelassen:
```
<h1>Überschriften sind wunderbar</h1>
<h3>Einleitung</h3>
```
Problem: Das Auslassen von Überschriften gilt als »schlechtes Vorgehen«, da alle Überschriftenelemente zur Strukturierung eines Dokuments verwendet werden sollten. Oder, wie die Web Content Accessibility Guidelines sagen:

Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, h2 elements should follow h1 elements, h3 elements should follow h2 elements, &c. Content developers should not “skip” levels (e.g., h1 directly to h3).
Die Hierarchien sind falsch:
```
<h1>Überschriften sind wunderbar</h1>
<h2>Einleitung</h2>
<h2>Login</h2>
<h3>Verschiedenes</h3>
```
Problem: Die Dokumentstruktur deutet möglicherweise auf Themen hin, die gar nicht zum Hauptthema gehören, wie im Beispiel »Login«, was nicht zum eigentlichen Thema der Beispielseite gehört, nämlich »Überschriften sind wunderbar«, sondern gewissermaßen Sekundärinformation oder -funktionalität darstellt. Dies ist inkonsistent, mehr oder minder irritierend und letztlich einfach falsch.

Lösungen: Tabus, `h1`-Lokalisierung und zugängliches Verstecken

Passende Dokumentstrukturen sollten in erster Linie die obigen Probleme vermeiden, indem sie weder Überschriftenebenen auslassen noch Inkonsistenzen zulassen, diese ergo tabuisieren. Dazu kommt die Möglichkeit, die Seitenidentität im gesamten Angebot mit einem h1-Element zu kennzeichnen, auch wenn empfohlen wird, h1 für den Seitentitel zu verwenden; dieses Vorgehen hat den Vorteil, nachfolgende h2-Elemente sowohl für den eigentlichen Titel als auch für quasi parallele sekundäre Inhalte einzusetzen. Zu guter Letzt und im Notfall könnten »Hilfsüberschriften« eingesetzt werden, die die Hierarchie »geraderücken«, aber mittels CSS auf zugängliche Weise ausgeblendet werden.

Im Überblick:

Maßnahmen

Durchgängige Überschriftenhierarchien

Wie geschildert: Lassen Sie keine Überschriftenebenen aus, sondern verwenden Sie immer durchgehende, konsistente Hierarchien. Dabei meint »konsistent« nicht nur eine sinnvolle Outline, sondern auch eine stimmige, bei der Unterüberschriften also vor allem inhaltlich zu den jeweils übergeordneten passen.
h1 für Seitentitel oder notfalls -identität

Die h1-Hauptüberschrift sollte idealerweise den Seiten- bzw. Dokumenttitel beinhalten. Sie kann im Zweifelsfall aber auch das »Branding« des Dokuments umfassen, da dies nicht nur aus Dokumentsicht legitim sein kann und einen gewissen SEO-Faktor darstellt, sondern auch die Möglichkeit bietet, die Hierarchie zu »begradigen«. Verwenden Sie das h1-Element auf Dokumentebene eher »spärlich«; so ist der von mir ehemals absichtlich forcierte Einsatz von h1-Überschriften bei GMX etwas zuviel des Guten.
Hilfsüberschriften

Setzen Sie in letzter Instanz auf Hilfsüberschriften, um saubere Hierarchien zu gewährleisten. Dies bedeutet, dass Sie inhaltlich passende Zwischenüberschriften einsetzen, die jedoch nicht unbedingt (optisch) dargestellt werden müssen:
HTML
```
<h2 class="aux">Weitere Informationen</h2>
```
CSS
```
.aux {
  height: 1px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: -999em;
  width: 1px;
}
```
CSS-Regel nach GMX- und eigenen Code-Richtlinien formatiert. Einige Suchmaschinen raten vom Verbergen von Inhalten ab.

Schlussbemerkung

Überschriften bilden das semantische Rückgrat jedes Dokuments, und die wenigen existierenden Regeln, immer noch rar gesäten vorzeigbaren Beispiele und der mangelnde Konsens bezüglich ihrer Verwendung erschweren gute, hilfreiche Hierarchien, vor allem bei komplexeren Dokumenten. Die dargestellten Empfehlungen bieten Orientierung (wenn auch en detail relativ pragmatisch) und dienen der Konsensfindung, um einen weiteren, dokumentierten Schritt in Richtung mehr Qualität zu gehen.

Über mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.