<hgroup>

Zuletzt aktualisiert am 3. Juli 2026

Das <hgroup>-Element gruppiert eine Überschrift (<h1> bis <h6>) mit einem oder mehreren zugehörigen <p>-Elementen, die als Untertitel, Tagline oder alternative Beschreibung dienen. Browser und Screenreader erkennen dadurch, dass diese Elemente zusammengehören und eine logische Einheit bilden.

Grundlagen

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.

Syntax

<hgroup>
  <h1>Willkommen auf meinem Blog</h1>
  <p>Tutorials und Tipps rund um Webentwicklung</p>
</hgroup>

Beispiele

Artikelüberschrift mit Untertitel

Ein klassisches Einsatzszenario ist eine Artikelseite mit Hauptüberschrift und einer kurzen Tagline oder Beschreibung darunter. Der Untertitel gehört inhaltlich zur Überschrift, ist aber keine eigenständige Sektion.

<article>
  <hgroup>
    <h1>CSS Grid verstehen</h1>
    <p>Ein praktischer Einstieg in das mächtigste Layout-System von CSS</p>
  </hgroup>
  <p>In diesem Artikel lernst du, wie CSS Grid funktioniert...</p>
</article>

hgroup innerhalb eines header-Elements

Du kannst <hgroup> innerhalb eines <header> verwenden, um Überschrift und Untertitel zu gruppieren, während der Header zusätzliche Elemente wie Navigation oder Meta-Informationen enthält.

<article>
  <header>
    <hgroup>
      <h1>JavaScript für Einsteiger</h1>
      <p>Dein Weg zur ersten interaktiven Webseite</p>
    </hgroup>
    <p>
      Veröffentlicht am <time datetime="2026-02-06">6. Februar 2026</time>
      von Mario
    </p>
  </header>
  <p>JavaScript ist die Sprache des Webs...</p>
</article>

Verschiedene Überschriftenebenen

<hgroup> funktioniert mit jeder Überschriftenebene, nicht nur mit <h1>. In einem Abschnitt innerhalb einer Seite verwendest du zum Beispiel <h2> mit einem begleitenden <p>.

<section>
  <hgroup>
    <h2>Kapitel 3: Flexbox</h2>
    <p>Elemente flexibel anordnen mit dem Flexbox-Modell</p>
  </hgroup>
  <p>Flexbox ist ein eindimensionales Layout-Modell...</p>
</section>

<section>
  <hgroup>
    <h2>Kapitel 4: Grid</h2>
    <p>Zweidimensionale Layouts mit CSS Grid erstellen</p>
  </hgroup>
  <p>CSS Grid geht einen Schritt weiter als Flexbox...</p>
</section>

Barrierefreiheit

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.

Häufige Fehler

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.

Browser-Kompatibilität

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

Email-Kompatibilität

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.

Verwandte Elemente