Die Gliederung eines HTML5-Dokuments
Überschriften-Elemente im HTML5-Dokumenten
Im Überschriften im HTML5 haben Sie erfahren, dass die Überschriften-Elemente h1-h6 zur Gliederung Ihrer HTML-Seite beitragen. In diesem Abschnitt werfen wir noch einen Blick hinter die Kulissen und lernen, wie eine Handvoll Elemente, die in HTML5 neu hinzukamen, sich ebenfalls auf die Gliederung auswirken.
Noch eine syntaktische Anmerkung, bevor Sie weitermachen: In den folgenden Erläuterungen und Seiten verwende ich oft den Begriff Sektion als generischen Begriff und meine damit einen Teil einer Seite – im Gegensatz zum speziellen section-Element (von dem Sie später noch mehr erfahren). Wenn ich genau das section-Element meine, dann wird das Wort genauso wie in diesem Satz formatiert.
Okay, also weiter.
Sie wissen nun also, dass jedes HTML-Dokument über eine eingebaute Gliederung verfügt – ähnlich wie ein Inhaltsverzeichnis –, die durch die Überschriften-Elemente definiert wird.
Die Gliederung wird nun von der Seite nicht explizit dargestellt – obwohl Browser eines Tages vielleicht über ein Mittel dafür verfügen –, sondern wie bei allen semantischen Elementen ist sie beispielsweise für Screenreader oder Suchmaschinen von Bedeutung, die diese Gliederung nutzen, um die Struktur Ihrer Seite zu erfassen und die Benutzer mit Informationen zu versorgen.
In den Versionen von HTML und XHTML, die HTML5 vorausgingen, blieben einem nur die Überschriften-Elemente h1-h6, um die Gliederung zu strukturieren. HTML5 hingegen verfügt über vier Elemente, mit denen man eine Seite in Unterbereiche einteilen kann (das bezeichnet man als sectioning content), und zwar article, aside, nav und section. Diese grenzen Sektionen innerhalb eines Dokuments voneinander ab und definieren den Bereich der Elemente darin (und auch von header und footer).
Das bedeutet, dass jedes dieser abgrenzenden Elemente seine eigene h1-h6-Hierarchie hat, und das stellt einen Riesenfortschritt dar verglichen mit den früheren Versionen der Sprache. Außerdem gestattet die HTML5-Spezifikation, auf einer Seite sogar mehr als nur ein h1 zu haben (denn gleich werde ich erklären, warum Sie die h1 begrenzen sollten).
All das wirkt sich auf die Gliederung aus.
Vergleichen wir einmal zwei äquivalente Gliederungen, um zu sehen, wie das funktioniert. Für beide gehen wir davon aus, dass auf jede Überschrift eine Reihe von Absätzen und andere Inhalte folgen, die die Informationen des jeweiligen Abschnitts repräsentieren.
Die erste Gliederung ist valides HTML5 und allen vertraut, die sich mit HTML und XHTML auskennen. Sie arbeitet nur mit Überschriften-Elementen.
Die zweite Version verwendet sowohl Überschriften als auch section-Elemente aus HTML5, darunter ein verschachteltes section. (Anmerkung: Dass der Code eingerückt ist, ist unwichtig und wirkt sich nicht auf die Gliederung aus, aber dadurch wird deutlicher, welche Elemente in anderen enthalten sind.)
Dokumentgliederung Version 1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<h2>
Der Titel im HTML5
</h2>
<h2>
Überschriften im HTML5
</h2>
<h3>
Textabsätze im HTML5
</h3>
<h2>
Zeilenumbrüche im HTML5
</h2>
</body>
</html>
Dokumentgliederung Version 2
Gleiche Gliederung wie Version 1, aber aussagekräftiger ausgezeichnet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<section>
<h2>
Der Titel im HTML5
</h2>
</section>
<section>
<h2>
Überschriften im HTML5
</h2>
<section>
<!-- verschachtelt und somit ein ➝ Unterabschnitt des übergeordneten
➝ Elements -->
<h3>
Textabsätze im HTML5
</h3>
</section>
</section>
<section>
<h2>
Zeilenumbrüche im HTML5
</h2>
</section>
</body>
</html>
Vorhin hatte ich erwähnt, dass Browser bisher noch keine Gliederung anzeigen. Doch mit dem HTML5 Outliner von Geoffrey Sneddon können Sie sie schon mal prüfen. Dieses einfache, aber tolle Tool gibt eine visuelle Darstellung der Dokumentgliederung aus. Wenn Sie aus beiden Versionen damit jeweils eine Gliederung generieren, sehen Sie, dass die Überschriften-Ebenen für h1-h6 zwar unterschiedlich sind, aber beide diese Gliederung ergeben:
1. Die neuen Features von HTML5 1. Der Titel im HTML5 2. Überschriften im HTML5 1. Textabsätze im HTML5 3. Zeilenumbrüche im HTML5
Wie Sie sehen, wird in Version 2 jedes html-Element zu einer Untersektion des am nächsten gelegenen h1-h6 oder Vorfahrens, das die Seite aufteilt (sectioning content) (bei dem es sich in diesem Fall auch um section handelt). Das gleiche Verhalten gilt auch für die vier bereits erwähnten HTML5-Elemente für den Sectioning-Content (article, aside, nav und section) – auch wenn sie miteinander gemischt werden.
Im Vergleich wäre die Gliederung gänzlich anders, wenn Version 2 keine sections hätte (nennen wir dies Version 3).
Jede Überschrift wäre nämlich auf der gleichen Wichtigkeitsstufe h1 und das bedeutet, dass es gar keine untergeordneten Überschriften (oder Unterunterüberschriften) mehr gibt:
1. Die neuen Features von HTML5 2. Der Titel im HTML5 3. Überschriften im HTML5 4. Textabsätze im HTML5 5. Zeilenumbrüche im HTML5
Die Dokumentgliederung von Version 3
Nicht die gleiche Gliederung wie die Versionen 1 und 2.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<h1>
Der Titel im HTML5
</h1>
<h1>
Überschriften im HTML5
</h1>
<h1>
Textabsätze im HTML5
</h1>
<h1>
Zeilenumbrüche im HTML5
</h1>
</body>
</html>
Die beiden Gliederungen mit der gleichen Bedeutung (also Versionen 1 und 2) sind gültiges HTML5, aber die zweite wäre vorzuziehen, weil die section-Elemente semantisch mehr aussagen. In der Praxis könnten Sie den gesamten Inhalt von Version 2 in ein article-Element setzen, da das in diesem Kontext sogar noch angemessener wäre (aber die daraus resultierende Gliederung wäre etwas anders).
Vergessen Sie außerdem nicht, dass nach jeder Überschrift damit zusammenhängender Text, Bilder und anderer Inhalt folgen. Aber für den Augenblick habe ich das alles weggelassen, damit Sie sich besser auf Überschriften und Gliederungen konzentrieren können.
Was Sie im heutigen Ökosystem machen können
Aber Moment mal! Da gibt es noch eine andere Anpassung, die Sie beim Code vornehmen sollten. Warum sollen die h1 nun limitiert werden? Zwar stimmt es, dass jedes Element, mit dem man Inhalt voneinander abgrenzen oder sektionieren kann (also article, aside, nav und section), seine Überschriften-Hierarchie mit h1 beginnen kann, aber zwingend ist das nicht. Vielmehr ist zutreffend, dass Sie bis in absehbarer Zukunft besser damit fahren, jede solche Sektion mit einem h2 oder tiefer anzufangen, falls diese eine Unterüberschrift eines bereits vorhandenen h1-Elements für einen damit zusammenhängenden Inhalt darstellen soll.
Der Grund:
Das sich ständig weiterentwickelnde Internet enthält eine Vielzahl beweglicher Teile. Neue Spezifikationen wie HTML5 ändern sich täglich, bis sie final sind (das kann Jahre dauern und ist bei HTML5 noch gar nicht so weit). Neue Browser-Versionen erscheinen und neue Versionen von Screenreadern und weiterer assistiver Technologien werden entwickelt und veröffentlicht. Das alles ist nun garnicht sonderlich synchron oder aufeinander abgestimmt.
Gliederungsbeispiel mit expliziter Semantik
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<section>
<h1>
Der Titel im HTML5
</h1>
</section>
<section>
<h1>
Überschriften im HTML5
</h1>
<section>
<h1>
Textabsätze im HTML5
</h1>
</section>
</section>
<section>
<h1>
Zeilenumbrüche im HTML5
</h1>
</section>
</article>
</body>
</html>
Stattdessen läuft das meist so ab, dass jeder Browser sein Spektrum inkrementell ausbaut (was im Allgemeinen eine gute Sache ist) und dabei nicht notwendigerweise wie seine Konkurrenz vorgeht (das ist hingegen meist nicht so gut) und ganz gewiss nicht nach dem gleichen Fahrplan wie die anderen. Das Gleiche gilt für Screenreader. Obwohl also moderne Browser viele der HTML5-Features unterstützen, ist keiner zum Zeitpunkt, während ich dies schreibe, in der Lage, für Screenreader die HTML5-Dokumentgliederung auszugeben, und Screenreader können sie ihren Nutzern gegenüber auch nicht ausgeben.
Kurz gesagt bedeutet das, dass Screenreader und andere assistive Technologien bisher nicht unterscheiden zwischen einem h1, das sich direkt im body befindet, und einem h1, das sich in einem article, aside, nav oder section befindet. Aus deren Perspektive ist alles h1 auf oberster Ebene. Bruce Lawson, der bekannte Webevangelist für Opera, war meines Wissens der erste, der dies aufgezeigt hat. (https://brucelawson.co.uk/2009/headings-in-html-5-and-accessibility/; bitte beachten Sie, dass manche Informationen hier möglicherweise veraltet sind, weil sich die Spezifikation seitdem verändert haben kann.
In der Zwischenzeit können sich Screenreader nicht den Luxus leisten abzuwarten, bis das Internet ihre Bedürfnisse erfüllt. Sie werden damit weitermachen, sich anhand der Überschriften einen Überblick über den Inhalt der Seite zu verschaffen und gleichzeitig auch über die Navigation darin, wie sie das bisher auch immer gemacht haben.
Mit einer aussagekräftigen Hierarchie der Überschriften wird das einfacher und es sorgt für eine bessere Nutzererfahrung auf Ihrer Webseite.
Bis also das Ökosystem hier ein wenig aufgeholt hat, fahren Sie und Ihre Nutzer besser, wenn Sie in den Überschriften die Hierarchie explizit mit h1-h6 anzeigen – genauso, wie Sie es machen würden, falls keine abgrenzenden Elemente vorhanden wären. Lawson und andere Kollegen der Branche empfehlen diesen Ansatz und ich schließe mich dem an.
Schauen wir uns nun an, wie vorzugehen ist.
Was in der ersten Ebene der section-Elemente h1 war, ist nun h2, und die Überschrift Textabsätze im HTML5, die sich in einem doppelt verschachtelten section befand, ist nun ein h3 statt ein h1. Die Dokumentgliederung hat sich nicht geändert, nur die Überschriften-Ebenen.
Dieses Beispiel demonstriert nur h1-h3, aber falls Ihre Inhalte das hergeben, sollten Sie auch mit h4-h6 arbeiten. Eine Unterüberschrift für Textabsätze im HTML5 wäre dann beispielsweise eine h4 (mit oder ohne übergeordnetes Sektionierungs-Element – wie es Ihnen beliebt) usw.
Und denken Sie daran, dass diese Empfehlung für alle Sektionierungs-Elemente (article, aside, nav und section) gilt und nicht nur für die in diesem Beispiel gezeigten.
Version 4
Der von allen vier Versionen empfehlenswerte Ansatz für Überschriften.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<section>
<h2>
Der Titel im HTML5
</h2>
</section>
<section>
<h2>
Überschriften im HTML5
</h2>
<section>
<h3>
Textabsätze im HTML5
</h3>
</section>
</section>
<section>
<h2>
Zeilenumbrüche im HTML5
</h2>
</section>
</article>
</body>
</html>
Zusammenfassung
Ich schlage vor, dass Sie diese Erläuterungen über die HTML5-Dokumentgliederung erneut lesen, falls etwas davon noch nicht ganz eingängig war. Es ist nicht annähernd so kompliziert, wie es scheint. Ich rate Ihnen nachdrücklich, einfach mal ein paar unterschiedliche Testseiten zu erstellen und die Resultate im HTML5 Outliner zu vergleichen, damit Sie ein besseres Gefühl für die Arbeitsweise des Gliederungsalgorithmus bekommen. Nutzen Sie den Outliner auch in Ihrer Projektarbeit, um sicher zu sein, dass Ihre Struktur wie gewünscht ist. Zuerst prüfen Sie aber die HTML5-Seiten entweder unter Validator.nu oder Validator.w3.org um Coding-Fehler aufzudecken.
Hier soll allerdings nicht der Eindruck entstehen, dass Sie immer ein article verwenden müssen oder dass ein section immer (und ausschließlich) in einem article verschachtelt sein kann. Das hier erläuterte Beispiel war nur eine Möglichkeit, wie man diese Elemente verwenden kann, und tatsächlich kann man den gleichen Inhalt auch auf andere Weise auszeichnen und man hätte immer noch valides HTML5. Ich erkläre article-Artikel und section-Artikel später in diesem Kapitel noch genauer und Sie werden merken, dass abhängig von Ihren Inhalten verschiedene Anwendungen dafür möglich sind.
Wie der Gliederungsalgorithmus von HTML5 bei syndizierten Inhalten unterstützt
Wenn Sie bis hierhin alles mitverfolgt haben, wissen Sie, dass alle article-, aside-, nav- und section-Elemente aufgrund des Gliederungsalgorithmus von HTML5 und auch, weil sie alle zum Sectioning Content gehören, jeweils eine eigene Gliederung haben können. Diese beginnt mit h1 und kann bis h6 reichen.
Das erlaubt nicht nur eine große Flexibilität bei den Überschriften Ihres Dokuments, aber ein weiterer Vorteil ist nicht so offensichtlich: So können Ihre Inhalte auf anderen Seiten und sogar anderen Websites erscheinen, ohne dass damit die Gliederung des übergeordneten Dokuments zerschossen wird. Und die jeweils eigene Gliederung bleibt ebenfalls intakt.
Heutzutage werden immer mehr Inhalte von unterschiedlichen Sites gemeinsam genutzt. Es gibt Sites, auf denen Nachrichten aggregiert werden, Blogs mit RSS-Feeds, Twitter-Feeds usw. Wie Sie in Einen Artikel erstellen lernen werden, repräsentiert das article-Element eine eigenständige Komposition, die man syndizieren kann (das muss nicht sein, aber passenderweise sollte man das so machen).
Nehmen wir an, dass das folgende article von einer Site auf einer anderen Site dargestellt wird:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h2>
News rund um HTML5
</h2>
<article>
<h1>
HTML5 Lernen
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5.
</p>
<h2>
Möglichkeiten von HTML5
</h2>
</article>
</body>
</html>
Wenn Sie diesen Code mit dem HTML5 Outliner prüfen, bekommen Sie Folgendes zu sehen:
1. News rund um HTML5 1. Blockzitate und einfache Zitate 1. Einen Header erstellen im HTML5
Obwohl also die Überschrift HTML5 Lernen eine höhere Ebene h1 ist als das h2, unter dem es sich befindet, ist es eine Unterüberschrift des h2, weil es in einem article unter dieser Überschrift steht. Und die h2-Überschrift mit Möglichkeiten von HTML5 ist eine Unterunterüberschrift von der h2-Überschrift mit den News und befindet sich nicht auf gleicher Ebene.
Die News-Überschrift könnte eine h3, eine h4 oder irgendeine andere Überschriftenebene sein und die Gliederung wäre exakt die gleiche. Das Gleiche gilt für HTML5 Lernen und Möglichkeiten von HTML5, solange sich HTML5 Lernen auf einer höheren Ebene befindet.