Using the HTML `<header>` Element to Group Headings: Improving Structure and SEO

Learn how to semantically group related headings in your HTML documents using the `<header>` element. This tutorial explains the benefits of using `<header>` for improved document structure, accessibility, and search engine optimization (SEO).

Using the HTML `<hgroup>` Element to Group Headings

Understanding the `<hgroup>` Element

The HTML `<hgroup>` (heading group) element is a semantic element used to group related headings within an HTML document. It's used to indicate that multiple headings belong together, clarifying the document's structure and making it easier for both users and machines to understand the organization of your content. The `<hgroup>` element itself doesn't have any direct visual impact on the headings; you'll usually use CSS to style the headings and the group as a whole. This is a useful method for structuring content and improving the semantics of your HTML, which improves accessibility for screen readers and SEO (search engine optimization).

Using the `<hgroup>` Element

The `<hgroup>` element should contain one main heading (<h1> to <h6>) and one or more subheadings. The main heading generally defines the overall topic of the section, and the subheadings provide additional detail or sub-topics. For example:

<hgroup>
  <h1>Norway</h1>
  <p>The land of the midnight sun.</p>
</hgroup>

Note that the `<hgroup>` element itself doesn't render visually in the browser; it simply groups the headings semantically.

Browser Support for `<hgroup>`

The `<hgroup>` element is supported by all major modern browsers.

Styling `<hgroup>` with CSS

While the `<hgroup>` element itself doesn’t directly affect layout, you'll often use CSS to style the headings and the overall group. For example:

hgroup {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

Most browsers render the `<hgroup>` element as a block-level element by default.