HTML <hgroup> Tag
Der HTML <hgroup>-Tag gruppiert eine Überschrift mit ihrem Untertitel. Lernen Sie das Inhaltsmodell, die Syntax und Beispiele.
Der HTML-Tag <hgroup> gruppiert eine einzelne Überschrift (eines der Elemente <h1>–<h6>) zusammen mit einem oder mehreren <p>-Elementen, die als Untertitel, Schlagzeile oder alternativer Titel fungieren. Seine Aufgabe ist es, diesen unterstützenden Text mit der Überschrift zu verbinden, anstatt ihn als separaten Eintrag in der Dokumentgliederung erscheinen zu lassen.
Ein Seitentitel und sein Slogan gehören beispielsweise zusammen. Ohne <hgroup> müsste man den Slogan entweder als untergeordnete Überschrift auszeichnen (was die Gliederung überfüllt) oder als einfachen Absatz (wobei die visuelle und semantische Verbindung verloren geht). <hgroup> löst dieses Problem: Die Überschrift definiert den Gliederungseintrag, und der <p>-Inhalt wird ihr zugeordnet.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Inhaltsmodell
Dies ist der Punkt, den viele ältere Tutorials falsch darstellen. Das aktuelle <hgroup> umschließt nicht mehrere <h1>–<h6>-Geschwisterelemente. Sein Inhaltsmodell lautet:
- genau ein Überschriftenelement (
<h1>,<h2>,<h3>,<h4>,<h5>oder<h6>), plus - null oder mehr
<p>-Elemente vor und/oder nach dieser Überschrift.
Die <p>-Elemente enthalten den Untertitel, den alternativen Titel oder den Slogan. Nur die einzelne Überschrift trägt zur Seitengliederung bei; die Absätze sind ihr zugeordnet, erstellen aber keine eigenen Überschriften.
Spezifikationsstatus
Das Element <hgroup> wurde für mehrere Jahre aus der HTML-Spezifikation entfernt, weshalb viele ältere Dokumentationen es als nicht unterstützt kennzeichnen und davon abraten. Dieser Hinweis ist überholt: <hgroup> wurde 2022 wieder in den WHATWG HTML Living Standard aufgenommen, und zwar mit dem oben beschriebenen vereinfachten Inhaltsmodell aus Überschrift und Absätzen. Es ist heute ein gültiges Element.
<hgroup> ist ein gültiges Element im aktuellen WHATWG HTML Living Standard (2022 wiederhergestellt). Alle modernen Browser stellen seinen Inhalt korrekt dar. Beachten Sie, dass es keine speziellen eingebauten Barrierefreiheitssemantiken besitzt — Hilfstechnologien geben die darin enthaltene Überschrift als normale Überschrift aus, und die <p>-Elemente als gewöhnlichen Text.
Syntax
Der Tag <hgroup> wird paarweise verwendet: Sowohl das öffnende <hgroup> als auch das schließende </hgroup>-Tag sind erforderlich.
Beispiel des HTML-Tags <hgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Here you can learn the HTML basics.</p>
</hgroup>
</body>
</html>Beispiel des HTML-Tags <hgroup> mit CSS-Eigenschaften
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hgroup {
text-align: right;
font-family: Arial, sans-serif;
padding-right: 30px;
border-right: 15px solid #42c73a;
}
h1 {
font-size: 30px;
}
hgroup p {
margin: 0;
font-size: 18px;
color: #555;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn online</p>
</hgroup>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Attribute
Der Tag <hgroup> hat keine elementspezifischen Attribute. Er unterstützt die Globalen Attribute und die standardmäßigen Ereignisattribute.
Browserunterstützung
<hgroup> wird in allen modernen Browsern unterstützt — Chrome, Firefox, Safari und Edge — und ist Teil des aktuellen WHATWG HTML Living Standard. Da es außer dem Block-Container-Verhalten kein Standard-Styling besitzt, bedeutet die Unterstützung in der Praxis, dass der Browser die Überschrift und ihre Absätze wie erwartet darstellt.
Verwandte Tags
- HTML
<header>-Tag — einleitender Inhalt für eine Seite oder einen Abschnitt, in dem ein<hgroup>-Titelblock häufig platziert wird. - HTML
<h1>–<h6>-Tags — die Überschriftenelemente, die man innerhalb von<hgroup>verwendet. - HTML Headings — Überblick darüber, wie Überschriften die Dokumentstruktur prägen.