Das hgroup Element umschließt eine Überschrift und einen Subtitel. Dieser Subtitel sollte eine untergeordnete Überschrift oder ein p-Element sein. Wenn man mit der darunterliegenden Überschrift jedoch ein Unterthema einleitet, sollte das hgroup Element nicht verwendet werden.
<hgroup> <h1>Die Erde</h1> <h2>Der blaue Planet</h2> </hgroup>
Das <hgroup>-Element fungiert hier wie ein "Schutzschild": Es signalisiert dem Browser, Suchmaschinen und Screenreadern: „Achtung, diese <h2> ist kein neues Kapitel, sondern gehört als Untertitel direkt zur <h1> darüber!“ Im seitenweiten Inhaltsverzeichnis (Outline) taucht die <h2> dadurch gar nicht als eigener Punkt auf.
Der Standard erlaubt heute beides, aber für unterschiedliche Zwecke! Seit der neuesten Spezifikation darf ein <p>-Element innerhalb von <hgroup> stehen, wenn es sich um beschreibenden Text oder eine sekundäre Textzeile handelt, die keine echte Überschrift ist.
<hgroup>
<h1>Die Erde</h1>
<p>Eine Übersicht über die Geografie unseres Heimatplaneten.</p>
</hgroup>
Nutze <h2>, wenn der Untertitel ein Name, Titel oder Slogan ist.
Nutze <p>, wenn der Untertitel ein ganzer, erklärender Satz ist.
<hgroup> <h1>Die Erde</h1> <h2>Der blaue Planet</h2> </hgroup>
„Der blaue Planet“ ist ein klassischer Beiname oder Slogan. Er liest sich wie eine zweite, ergänzende Überschrift.
Was passiert im Hintergrund? Suchmaschinen und Screenreader verstehen: Das Thema ist „Die Erde“ und der Slogan dazu heißt „Der blaue Planet“. Die <h2> wird dank <hgroup> nicht als neues, tieferes Kapitel gewertet.
<hgroup> <h1>Die Erde</h1> <p>Eine Übersicht über die Geografie unseres Heimatplaneten.</p> </hgroup>
Wenn du den Untertitel so umformulierst, dass er zu einer beschreibenden Textzeile wird, wechselst du zum <p>-Element:
Was passiert im Hintergrund? Der Browser weiß, dass der Text im <p>-Tag eine direkte Beschreibung oder Zusammenfassung der Hauptüberschrift ist.
Früher (ohne <hgroup>) stand man immer vor einem Dilemma:
Packte man „Der blaue Planet“ in ein normales <h2>, dachte die Suchmaschine, jetzt beginnt ein neues Unterkapitel (wie „1. Die Erde“ -> 1.1 Der blaue Planet“). Das stimmte aber nicht.
Packte man es in ein <p>, war es für Suchmaschinen nur stinknormaler Fließtext und verlor an Bedeutung.
Mit dem modernen <hgroup> ist das Problem gelöst: Du darfst die semantische Kraft einer <h2> für deinen Slogan nutzen, ohne dass sie die Kapitelstruktur der restlichen Seite durcheinanderbringt!
Das <hgroup>-Element hat eine der wildesten Entwicklungsgeschichten im gesamten HTML5-Standard hinter sich!
Ganz früher (HTML5-Anfang): Erlaubt waren nur Überschriften (<h1> bis <h6>).
Zwischendurch (W3C-Chaos): <hgroup> wurde komplett aus dem Standard gelöscht! Man sollte stattdessen <h1> gefolgt von einem normalen <p> außerhalb nutzen.
Heute (Aktueller WHATWG-Standard): <hgroup> ist wieder voll zurück. Man nutzt <h1> + <h2> (oder weitere Stufen) für echte Untertitel oder alternativ <h1> + <p> für beschreibende Zeilen.