Kopf- und Fußbereich
Über die beiden Elemente header und footer lassen sich Kopf- und Fußbereich definieren. Um den Kopfbereich zu definieren, wird das head-Element verwendet. Dabei muss es sich übrigens nicht unbedingt um den Kopfbereich der gesamten Seite handeln. Ebenso kann man mit head auch den Kopfbereich anderer Elemente wie beispielsweise Sektionen und Artikel kennzeichnen.
Achtung: Verwechselt header nicht mit dem bekannten head-Element, über das der Kopfbereich von HTML-Dokumenten definiert wird, in dem Dokumenttitel, Stylesheet- und JavaScript-Aufrufe enthalten sind.
Für ein gesamtes Dokument sähe der Einsatz von header folgendermaßen aus:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Angewendet auf ein section-Element ergäbe sich folgendes Bild:
<section>
<header>
<h1> Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
<p> jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p>
</header>
<p>
Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt. Speziell für den Einsatz in Web-Apps konzipiert wurde das Schwester-Framework jQuery mobile (jQM). Dieses Framework hilft euch dabei, eure Web-App im Handumdrehen wie eine echte App aussehen zu lassen. Grund genug, einen ausführlichen Blick auf jQM zu werfen.
</p>
<footer>
<p>Copyright by PSD-Tutorials.de</p>
</footer>
</section>Achtet in jedem Fall darauf, dass footer und header keine zusätzlichen header- und footer-Elemente enthalten dürfen.
Überschriften gruppieren
Im Zusammenhang mit Sektionen kommen die Überschriften ins Spiel. Bei diesen Überschriften kann es sich zunächst einmal um die klassischen Elemente h1 bis h6 handeln. Ebenso ist in HTML5 aber auch das hgroup-Element erlaubt. Innerhalb dieser hgroup-Elemente können wiederum mehrere Überschriften enthalten sein.
Werft zunächst einen Blick auf ein klassisches HTML-Dokument, in dem die "übliche" Struktur mittels hx-Elementen definiert wird.
<h1>
Buch
</h1>
<h2>
Kapitel 1
</h2>
<h2>
Kapitel 2
</h2>
<h3>
Unterkapitel 2.1
</h3>
<h3>
Unterkapitel 2.2
</h3>
<h2>
Kapitel 3
</h2>
Diese Definition bedeutet folgende Struktur:
Buch
Kapitel 1
Kapitel 2
Unterkapitel 2.1
Unterkapitel 2.2
Kapitel 3
Im Browser werden die Überschriften allerdings nicht eingerückt.
Interessant ist hgroup vor allem im Zusammenhang mit journalistischen Texten. Diese bestehen oftmals aus einer zweiteiligen Überschrift, die sich aus der Hauptzeile sowie der Dach- oder Unterzeile zusammensetzt. Ein Beispiel soll diesen Aspekt verdeutlichen.
<hgroup> <h1>Cloud OS</h1> <h2>Das Web als Betriebssystem</h2> </hgroup> <p>Hier beginnt der Inhalt des Artikels …</p>
An diesem Beispiel ist deutlich zu erkennen, dass die Unterzeile keinen eigenen Abschnitt innerhalb des Artikels einleitet. Vielmehr handelt es sich bei dieser um einen Teil der Artikelüberschrift. Genau so etwas lässt sich mittels hgroup-Element zusammenfassen.
Innerhalb von hgroup sind die Elemente h1 bis h6 erlaubt.
Das Outline-Konzept
Zusätzlich kommt in HTML5 das Outline-Konzept ins Spiel, bei dem es um das Zusammenwirken von section- mit den diversen hx-Elementen geht. Bei diesem Konzept werden, wie bislang üblich, die Überschriften durch die Elemente h1 bis h6 in verschiedene Ebenen unterteilt. Dabei entspricht h1 der obersten Ebene, während h6 die niedrigste Ebene darstellt. Hier gibt es also keine Veränderung im Vergleich zu früher. Denn jetzt können die hx-Elemente innerhalb von section-Elementen definiert werden. Und dabei beginnt dann jedes Mal die Zählung neu, allerdings immer eine Ebene tiefer.
Das Outline-Konzept wirkt in der HTML5-Spezifikation recht kompliziert, die Idee dahinter ist aber denkbar einfach. Tatsächlich lässt sich darüber nämlich eine Inhaltsangabe definieren, welche die Dokumentstruktur maschinenlesbar macht.
Auch hierzu ein Beispiel:
<h1>
Kapitel 1
</h1>
<section>
<h1>
Kapitel 2
</h1>
<section>
<h1>
Kapitel 3
</h1>
</section>
</section>
Durch das Outline-Konzept von HTML5 ergibt sich daraus die folgende Struktur:
1. Kapitel 1
- Kapitel 2
- Kapitel 3
- Kapitel 3
Ein weiteres Beispiel soll den Effekt verdeutlichen. Auch hier zunächst wieder das Ausgangsdokument.
<section>
<h1>Installation und Konfiguration</h1>
<section>
<h2>Installation</h2>
<p>Alles rund ums Thema Installation
</section> <section>
<h2>Konfiguration</h2>
<p>Hier findet ihr alles zum Thema Konfiguration
</section>
<aside>
<p>Interessante Bücher zum Thema...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Die daraus resultierende Struktur sieht folgendermaßen aus:
1. Section (Installation und Konfiguration)
1.1 Section (Installation)
1.2 Section (Konfiguration)
1.3 Section (aside)
- Section (footer)
Und noch ein Beispiel:
<body>
<h1>Installation und Konfiguration</h1>
<h2>Installation</h2>
<p>Alles zum Theme Installation
...noch mehr Inhalt...
<section>
<h3>Voraussetzungen</h3>
<p>Alles zum Thema Installationsvoraussetzungen
...noch mehr Inhalt...
<h3>Vorbereitungen</h3>
<p>Alles zum Thema Vorbereitungen
...noch mehr Inhalt...
<h2>Konfiguration</h2>
<p>Alles zum Thema Konfiguration
...noch mehr Inhalt...
</section>
</body>
Die Ergebnisstruktur sieht folgendermaßen aus:
1. Installation und Konfiguration
1.1 Installation
1.1.1 Voraussetzungen
1.1.2 Vorbereitungen
1.2 Konfiguration
Die interne Zählung beginnt hier also jedes Mal wieder bei 1. Vom Outline-Konzept sind nur diese Elemente betroffen:
• article
• aside
• nav
• section
Die beiden Elemente header und footer bleiben hingegen außen vor.
Beachtet bitte, dass das Outline-Konzept momentan von den Browsern noch nicht unterstützt wird.
Es wird allerdings nur eine Frage der Zeit sein, bis die Browserhersteller hier handeln. Zu groß wären die Vorteile des Outline-Konzepts. Denkt beispielsweise an automatisch generierte Navigationsleisten. Aber auch so gilt: Selbst wenn die Strukturierung in der genannten Form von den Browsern momentan ignoriert werden, solltet ihr bereits jetzt versuchen, eure Dokumente logisch zu strukturieren. So bekommt ihr auch gleich eine gewisse Zukunftssicherheit für eure Webseiten.
