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 andH6
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 followh1
elements,h3
elements should followh2
elements, &c. Content developers should not “skip” levels (e.g.,h1
directly toh3
). -
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ätDie
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 dash1
-Element auf Dokumentebene eher »spärlich«; so ist der von mir ehemals absichtlich forcierte Einsatz vonh1
-Ü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
Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.
Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)
Ähnliche Beiträge
Das könnte dich ebenfalls interessieren:
- Schlechtes HTML ist teuer (und weitere Weisheiten)
- CSS, DRY und Code-Optimierung
- Warum Menschen online nicht lesen – und was man dagegen tun kann
Freund von optimiertem HTML? Probier Upgrade Your HTML (2019–2024). Gutes HTML ist nicht einfach. Minimales HTML wird unterschätzt. HTML aus dem Alltag kann man oft verbessern. Diese Buchserie macht das. Erhältlich bei Amazon, Apple Books, Kobo, Google Play Books und Leanpub.