<hgroup>

Das <hgroup>-Element ist ein semantisches Block-Element, das eine Überschrift mit begleitendem Text verbindet. Es enthält genau eine Überschrift (<h1> bis <h6>) und ein oder mehrere <p>-Elemente, die als Untertitel oder ergänzende Beschreibung fungieren. Die Überschriftenebene im Dokument-Outline wird dabei ausschließlich von der enthaltenen Überschrift bestimmt — die <p>-Elemente werden nicht als Headings gelesen und tragen nicht zur Heading-Hierarchie bei.

Das ist ein entscheidender Vorteil gegenüber dem verbreiteten Ansatz, Untertitel als <h2> unter einer <h1> zu codieren. Denn dabei entsteht eine falsche Hierarchie: Der Screenreader sieht zwei separate Überschriften, obwohl der Untertitel inhaltlich keine eigene Sektion einleitet. Mit <hgroup> vermeidest du dieses Problem elegant.

Eine häufige Verwechslung besteht zwischen <hgroup> und <header>. Die beiden Elemente haben unterschiedliche Aufgaben: <header> markiert einen einleitenden Bereich mit Navigation, Logo, Überschriften oder Suchfeldern. <hgroup> dagegen gruppiert ausschließlich eine Überschrift mit ihrem Untertitel. Ein <hgroup> kann innerhalb eines <header> stehen, ersetzt ihn aber nicht.

Das <hgroup>-Element hat eine bewegte Geschichte. Es wurde in HTML5 ursprünglich eingeführt, dann zeitweise aus der Spezifikation entfernt, weil die ursprüngliche Definition Probleme mit dem Dokument-Outline-Algorithmus hatte. Im HTML Living Standard wurde es mit einer neuen, klareren Definition wieder aufgenommen: Statt mehrerer Überschriften enthält es jetzt genau eine Überschrift plus begleitende <p>-Elemente. Diese neue Definition ist die aktuelle und von allen modernen Browsern unterstützte Version.

Das <hgroup>-Element hat die implizite ARIA-Rolle group. Screenreader erkennen dadurch, dass die enthaltenen Elemente zusammengehören. Die Überschrift innerhalb des <hgroup> wird ganz normal als Heading in der Dokumentstruktur gelesen, während die <p>-Elemente als normaler Text vorgelesen werden.

Das ist ein großer Vorteil für die Barrierefreiheit. Wenn du einen Untertitel als <h2> unter einer <h1> platzierst, sieht ein Screenreader zwei separate Überschriften auf verschiedenen Ebenen. Das suggeriert, dass der Untertitel eine eigene Sektion einleitet — was in den meisten Fällen nicht stimmt. Mit <hgroup> vermeidest du diese falsche Hierarchie: Die Überschriftenstruktur bleibt sauber, und der Untertitel wird korrekt als ergänzender Text erkannt.

Screenreader-Nutzer, die per Tastenkürzel durch die Überschriften einer Seite springen, sehen nur die tatsächlichen Heading-Elemente innerhalb der hgroup. Der begleitende Text wird dabei übersprungen, ist aber im normalen Lesefluss verfügbar. Das sorgt für eine aufgeräumte Navigation ohne Informationsverlust.

Untertitel als h2 statt p kodieren: Der häufigste Fehler ist, den Untertitel als eigenständige Überschrift zu verwenden. Wenn du unter einer <h1> direkt eine <h2> als Untertitel setzt, entsteht eine falsche Überschriften-Hierarchie. Der Screenreader denkt, die <h2> leitet eine neue Sektion ein. Verwende stattdessen ein <p>-Element innerhalb von <hgroup>.

<!-- Falsch: Erzeugt falsche Heading-Hierarchie -->
<h1>Mein Blog</h1>
<h2>Tipps und Tricks für Webentwickler</h2>

<!-- Richtig: Untertitel als p in hgroup -->
<hgroup>
  <h1>Mein Blog</h1>
  <p>Tipps und Tricks für Webentwickler</p>
</hgroup>

hgroup ohne Überschrift verwenden: Ein <hgroup> muss immer genau eine Überschrift (<h1> bis <h6>) enthalten. Ein <hgroup> mit nur <p>-Elementen ist ungültig und ergibt semantisch keinen Sinn. Die Überschrift ist der Kern des Elements — die begleitenden <p>-Elemente sind die Ergänzung.

Verwechslung mit header: <hgroup> und <header> haben unterschiedliche Aufgaben. Ein <header> ist ein einleitender Bereich, der Navigation, Logo, Überschriften und mehr enthalten kann. Ein <hgroup> gruppiert ausschließlich eine Überschrift mit ihrem Untertitel. Wenn du zusätzliche Elemente wie ein Veröffentlichungsdatum oder eine Navigation brauchst, verwende <header> und setze bei Bedarf ein <hgroup> hinein.

Mehrere Überschriften in einem hgroup: In der aktuellen Spezifikation (HTML Living Standard) darf ein <hgroup> nur eine einzige Überschrift enthalten. Die alte HTML5-Definition erlaubte mehrere Überschriften, aber das ist nicht mehr gültig. Verwende genau ein <h1> bis <h6> und ergänze es mit <p>-Elementen.

Das hgroup-Element wird von allen modernen Browsern vollständig unterstützt.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Das hgroup-Element wird in HTML-E-Mails nicht unterstützt. E-Mail-Clients ignorieren oder entfernen semantische HTML5-Elemente. Verwende stattdessen table- oder div-basierte Layouts mit Inline-Styles, um Überschriften und Untertitel visuell zusammenzufassen.

• Apple Mail

  Keine

  Wird ignoriert, Kindelemente werden als einzelne Blöcke gerendert.

• Gmail

  Keine

  Semantische HTML5-Elemente werden entfernt.

• Outlook

  Keine

  Outlook entfernt unbekannte HTML5-Elemente vollständig.

• Thunderbird

  Keine

  Element wird ignoriert, Inhalt wird ohne Gruppierung angezeigt.

• Yahoo Mail

  Keine

  Semantische Elemente werden nicht unterstützt.