Das hgroup Tag

Das <hgroup> Element ist ein Second Level Element, dass genutzt wird um eine oder mehrere Überschriften (<h1> to <h6> ), wie zum Beispiel den Titel und einen Unter-Titel zusammenzufassen. Da im <hgroup> Element nur Überschriften enthalten sein dürfen, ist es vielleicht anhand eines Beispiels am einfachsten zu verdeutlichen wann und wo das <hgroup> Element zum Einsatz kommt.

Ein Artikel mit einem Titel

Wenn es nur einen Titel gibt, besteht keine Notwendigkeit das <hgroup> Element zu verwenden

<article>
	<header>
		<h1>All about flour</h1>
	</header>
</article>

Ein Artikel mit Titel und Metadaten

Es gibt immernoch nur einen Titel und obwohl einige Meta-Daten zur Verfügung gestellt werden ist es noch nicht notwendig das <hgroup> Element einzusetzen.

<article>
	<header>
		<h1>All about flour</h1>
		<p>Published on January 12th</p>
	</header>
</article>

Ein Artikel mit Titel und Untertitel

Jetzt haben wir zwei Titel und können das <hgroup> Element verwenden:

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
	</header>
</article>

Ein Artikel mit Titel, Untertitel und Metadaten

Wenn es mehrere Titel und Metadaten gibt, enthält das <hgroup> Element nur die Titel, die auch als <h1> bis <h6> ausgezeichnet sein sollten:

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
		<p>Published on January 12th</p>
	</header>
</article>

Was wir gelernt haben

• Das <hgroup> Element ist immer innerhalb eines <header> Elements
• Das <hgroup> Element enthält nur Überschriften (wie z.B. Untertitel) die als <h1> bis <h6> ausgezeichnet sein müssen.
• Sämtlicher andere <hgroup> relevanter Inhalt wird außerhalb des <hgroup> Elementes belassen.