20.12.2011, 10:08 Uhr Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Die Formatierung von Überschriften mit den H1- bis H6-Elementen ist ein alter Hut. Allerdings gibt es mit HTML5 zwei neue Elemente, mit denen sich Überschriften gruppieren und zusammen mit anderen Elementen als Einleitung zusammenfassen lassen.

HTML5 und das HGROUP-Element zum Gruppieren von Überschriften

Mit dem HTML5-Element HGROUP lassen sich mehrere Überschriften gruppieren. Gerade journalistische Texte haben oftmals keine einfache Überschrift, sondern eine zweiteilige Überschrift bestehend aus der Hauptzeile sowie der Dach- oder Unterzeile. Da die Dach- beziehungsweise Unterzeile keinen Abschnitt innerhalb des Artikels einleitet, sondern Teil der Artikelüberschrift ist, lassen sich diese semantisch mit dem HGROUP-Element gruppieren:

<hgroup>
<h1>Cloud OS</h1>
<h2>Das Web als Betriebssystem</h2>
</hgroup>
<p>Hier beginnt der Inhalt des Artikels …</p>

Das HGROUP-Element darf ausschließlich Überschriften (H1 bis H6) beinhalten. Es signalisiert also, dass alle gruppierten Überschriften zusammengehören und eine Einheit bilden.

HTML5 und das HEADER-Element

Das HEADER-Element – nicht zu wechseln mit dem HEAD-Element – dient dazu, Überschriften und weitere Inhalte einer Seite zusammenzufassen. Dabei kann es sich um einen Einleitungstext für einen Artikel handeln, der gemeinsam mit der Artikelüberschrift oder gruppierten Überschriften im HEADER-Element zusammengefasst werden:

<header>
<hgroup>
<h1>Cloud OS</h1>
<h2>Das Web als Betriebssystem</h2>
</hgroup>
<p>Hier steht ein kurzer Einleitungssatz, der in den Artikel einführt.</p>
</header>
<p>Hier beginnt der Inhalt des Artikels …</p>

Das HEADER-Element kann beliebige andere Elemente enthalten. Neben Absätzen können auch Tabellen, Listen und andere Elemente verwendet werden. Statt einer Einleitung kann auch eine Navigation eingebunden werden, über die sich einzelne Abschnitte des Artikels ansteuern lassen.

Vor allem im Zusammenhang mit den ARTICLE-Element, mit dem sich explizit Artikel – zum Beispiel ein Beitrag eines Blogs – auszeichnen lassen, bietet sich der Einsatz des HEADER-Elementes an:

<article>
<header>
<hgroup>
<h1>Cloud OS</h1>
<h2>Das Web als Betriebssystem</h2>
</hgroup>
<p>Hier steht ein kurzer Einleitungssatz, der in den Artikel einführt.</p>
</header>
<p>Hier beginnt der Inhalt des Artikels …</p>
</article>

So lassen sich alle gängigen Bestandteile eines Artikels – Überschrift, Dach- beziehungsweise Unterzeile, Einleitung und der eigentliche Artikelinhalt – semantisch auszeichnen.

Das HEADER-Element darf nicht in einem anderen HEADER-Element und auch nicht in einem FOOTER- oder ADDRESS-Element platziert werden. Ansonsten ist man in der Handhabung frei.

Semantik und CSS

Durch die Vielzahl neuer HTML5-Elemente erübrigen sich in vielen Fällen die Auszeichnung mit einem DIV-Element und die Vergabe von Klassen. Um Artikel- und Zwischenüberschriften sowie Einleitungen zu gestalten, bedarf es fortan keiner Klassenvergabe mehr.

Neben einer semantisch sinnvollen Auszeichnung ist auch die Gestaltung per CSS einfacher geworden. Alle aktuellen Browser unterstützen sowohl das HGROUP- als auch das HEADER-Element.

Wie haltet ihr es mit dem HGROUP- und HEADER-Element? Setzt ihr sie bereits ein? Verwendet ihr weitere HTML5-Elemente zur semantischen Auszeichnung – wie zum Beispiel das ARTICLE-Element?

Weitereführende Links zum Thema HTML5:

• HTML5 und Local Storage: Daten für Offlinebetrieb speichern – t3n-News
• HTML5: Neue Formulartypen in der Praxis – t3n-News
• Popcorn – HTML5-Tool zum Erstellen interaktiver Webvideos – t3n-News
• HTML5: Neue Aufgaben für die Elemente SMALL, B und I – t3n-News
• Mobile HTML5-Entwicklung für iOS mit mehr Features, dank MobiUs – t3n-News