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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

24 Kommentare
passsy

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

Antworten
Bene

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

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
Artikel gruppieren
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
Johannes
Johannes

@passsy

Dann hast du es wohl falsch angewendet.

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

Antworten
Simon

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

Antworten
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
Abbrechen

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