Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5: Überschriften und Einleitungen von Artikeln gruppieren

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:

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Mario Steuck

ich habe es auch so auf einer seite gemacht.. überschriften gruppiert und google hat es sehr gut angenommen und bewertet das auch aus meiner sicht höher als normal eingebundene überschriften. ist aus meiner sicht also nur zu empfehlen.

Antworten
Simon

Ich stimme bene in beiden Kommentaren zu:)
Es sieht auch schöner aus)

Antworten
Johannes

@passsy

Dann hast du es wohl falsch angewendet.

hgroup hab ich persönlich jetzt noch nicht genutzt. mal ausprobieren demnächst. :)

Antworten
Artikel gruppieren

Abstracts oder Zusammenfassungen für verschiedene Zielgruppen oder in verschiedenen Größen (DinA4-Ausdruck, Smartphone, Tablett, RSS-Feed, Twitter) müsste man am Anfang des Artikels sammeln können.

Das CMS müsste dann z.b. quengeln wenn die Twitter-Zusammenfassung zu lang ist oder woanders nur 100 Worte/1000 Zeichen erlaubt sind.

Antworten
Bene

zum Artikel:

schön sauberes und logisches Markup, gefällt!
Ich benutze selber auch HTML5 tags, nicht nur weils zeitgemäß ist, es verbessert auch die Übersicht im Code während der Entwicklung.

Antworten
Bene

was soll das heißen, google interprtiert falsch? habe noch nie Probleme mit HTML Markup im zusammenhang mir Google gehabt.

Antworten
passsy

hatte es mal ausprobiert, aber google hat es total falsch interpretiert, dann habe ich wieder auf divs umgestellt.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.