HTML-Tag `<hgroup>`

Das Tag <hgroup> wird verwendet, um HTML-Überschriften zu gruppieren. Wir verwenden <hgroup>, um ein oder mehrere Überschriftselemente von <h1> - <h6> zusammenzufassen.

Das Tag <hgroup> ermöglicht es, die primäre Überschrift mit sekundären Überschriften zu gruppieren und so eine mehrstufige Überschrift zu bilden. Es verhindert, dass sekundäre <h1> - <h6>-Kinder ihre eigenen separaten Abschnitte erstellen.

In der abstrakten Gliederung bildet <hgroup> eine logische Überschrift mit einem Gesamtsatz von <h1> - <h6>-Kindern, die als eine mehrstufige Einheit in die Gliederung eingehen. Ein <hgroup>-Element kann in einer gerenderten Gliederung auf viele Arten dargestellt werden:

Es kann mit einem Doppelpunkt und einem Leerzeichen oder anderer Zeichensetzung nach der primären Überschrift und vor der ersten sekundären Überschrift dargestellt werden.
Es kann mit der primären Überschrift dargestellt werden, gefolgt von sekundären Überschriften in Klammern.

DANGER

<hgroup> wird in HTML5 nicht unterstützt, aber in der WHATWG-Living-Standard-Spezifikation schon. Die Zukunft des Elements ist noch unklar, deshalb ist es besser, dieses Tag nicht zu verwenden.

Syntax

Das Tag <hgroup> kommt paarweise vor. Das schließende Tag ist jedoch nicht erforderlich.

Beispiel für das HTML-`<hgroup>`-Tag:

Beispiel für das HTML-<hgroup>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
    </hgroup>
  </body>
</html>

Try it Yourself »

Ergebnis

hgroup tag example

Beispiel für das HTML-`<hgroup>`-Tag in Verbindung mit CSS-Eigenschaften:

Beispiel für das HTML-<hgroup>-Tag mit den CSS-Eigenschaften:

html

<!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;
      }
      h2 {
        font-size: 20px;
      }
      p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Learn online</h2>
    </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>

Try it Yourself »

Attribute

Das Tag <hgroup> unterstützt die Global Attributes.

So stylen Sie ein HTML-<hgroup>-Tag

json

{
    "tag_name": "hgroup"
}

Practice

What is the primary purpose of the HTML <hgroup> tag?

To create a hyperlinkTo group a set of <h1>–<h6> elements when the heading has multiple levels.To embed multimedia contentTo define a header for a document or sectionTo downplay the importance of the lower ranked header

HTML-Tag <hgroup> ​

Syntax ​

Beispiel für das HTML-<hgroup>-Tag: ​

Ergebnis ​

Beispiel für das HTML-<hgroup>-Tag in Verbindung mit CSS-Eigenschaften: ​

Attribute ​