HTML: Hinweise zu Überschriften und Hierarchien (Outlines)

Artikel vom 6. Januar 2007. ISSN 1614-3124, #30. Schwerpunkt: (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:

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

  1. 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.

  2. 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.

  3. 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.

War dies nützlich oder interessant? Teile diesen Beitrag, werde Nanosponsor oder unterstütze meine Arbeit, indem du mit meinen E-Books lernst.

Über mich

Jens Oliver Meiert, am 30. September 2021.

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. (Sei kritisch, interpretiere wohlwollend und gib Feedback.)