← Back to All Tags

<hgroup>

Establishes introductory header content and related content

✨ HTML5

Definition and Usage

The <hgroup> tag is used to group a set of <h1> to <h6> elements when a heading has multiple levels, such as subheadings, alternative titles, or taglines.

The <hgroup> element groups multiple headings together as a single heading in the document outline. Only the first heading in the group contributes to the document outline.

Tip: Use <hgroup> when you have a main heading with one or more subheadings that form a single logical heading.
Note: The <hgroup> element was removed from HTML5 specification but has been re-added and is now supported in modern browsers.

Browser Support

The <hgroup> tag is supported in all major browsers:

Chrome
Chrome
5.0+
Firefox
Firefox
4.0+
Safari
Safari
5.0+
Edge
Edge
12.0+
Opera
Opera
11.1+

Attributes

The <hgroup> tag supports the Global Attributes in HTML.

The <hgroup> tag also supports the Event Attributes in HTML.

Examples

Title with Subtitle

Group a main heading with a subtitle:

Example

<hgroup>
  <h1>Introduction to HTML5</h1>
  <h2>A Comprehensive Guide for Beginners</h2>
</hgroup>

<p>This tutorial will teach you everything you need to know about HTML5...</p>

Multi-Line Headings

Create complex multi-level headings:

Example

<article>
  <hgroup>
    <h1>The Complete Web Developer Course</h1>
    <h2>Learn HTML, CSS, and JavaScript</h2>
    <h3>From Zero to Hero in 2025</h3>
  </hgroup>

  <p>This comprehensive course covers all aspects of web development...</p>
</article>

Article with Date and Author

Group heading with metadata:

Example

<article>
  <header>
    <hgroup>
      <h2>Understanding CSS Grid Layout</h2>
      <h3>A Modern Approach to Web Layout</h3>
    </hgroup>
    <p>Published on January 15, 2025 by Jane Developer</p>
  </header>

  <p>CSS Grid is a powerful two-dimensional layout system...</p>
</article>

Styled Hgroup

Apply CSS styling to grouped headings:

Example

<style>
  hgroup {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 30px;
  }

  hgroup h1 {
    margin: 0 0 10px 0;
    font-size: 36px;
    font-weight: 700;
  }

  hgroup h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    opacity: 0.9;
  }
</style>

<hgroup>
  <h1>Welcome to Our Website</h1>
  <h2>Your Ultimate Resource for Web Development</h2>
</hgroup>

Blog Post Header

Use hgroup in a blog post:

Example

<article>
  <hgroup>
    <h1>10 Tips for Writing Clean Code</h1>
    <h2>Best Practices Every Developer Should Know</h2>
  </hgroup>

  <p>Writing clean, maintainable code is essential for long-term project success...</p>

  <ol>
    <li>Use meaningful variable names</li>
    <li>Keep functions small and focused</li>
    <li>Comment your code appropriately</li>
  </ol>
</article>

Event Announcement

Group event title with details:

Example

<section>
  <hgroup>
    <h2>Web Development Conference 2025</h2>
    <h3>Join Us for Three Days of Learning and Networking</h3>
    <h4>March 15-17, 2025 | San Francisco, CA</h4>
  </hgroup>

  <p>Register now for the premier web development conference...</p>
  <button>Register Now</button>
</section>

Landing Page Hero

Create an impactful hero section:

Example

<style>
  .hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
  }

  .hero hgroup h1 {
    font-size: 48px;
    margin: 0 0 20px 0;
    font-weight: 800;
  }

  .hero hgroup h2 {
    font-size: 24px;
    margin: 0 0 30px 0;
    font-weight: 300;
    opacity: 0.95;
  }

  .cta-button {
    background: var(--bg-primary);
    color: #667eea;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
  }
</style>

<section class="hero">
  <hgroup>
    <h1>Build Amazing Websites</h1>
    <h2>Learn HTML, CSS, and JavaScript with Our Interactive Tutorials</h2>
  </hgroup>
  <button class="cta-button">Start Learning Free</button>
</section>

When to Use Hgroup

  • Main Heading with Subheading: When you have a primary title and supporting subtitle
  • Alternative Titles: When content has both a main title and an alternative version
  • Taglines: When combining a heading with a descriptive tagline
  • Multi-Part Headings: When a heading conceptually consists of multiple parts
  • Event Information: When grouping event name, description, and date/location
  • Course Titles: When displaying course name with descriptive subtitle
Important: Only use <hgroup> when the headings form a logical single unit. Don't use it just to group any headings together.

Accessibility Considerations

  • Only the first heading in <hgroup> appears in the document outline
  • Screen readers may handle hgroup differently across browsers
  • Ensure heading hierarchy makes sense even if hgroup is ignored
  • Use appropriate heading levels (don't skip levels)
  • Consider using ARIA labels if additional context is needed
  • Test with screen readers to ensure proper announcement
  • Don't rely solely on hgroup for semantic structure
Accessibility Tip: While <hgroup> groups headings visually and semantically, screen readers will still announce all headings within it. Ensure all text is meaningful and descriptive.

CSS Styling for Grouped Headings

Common styling patterns for hgroup elements:

Example - Styling Hgroup

/* Basic hgroup styling */
hgroup {
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 2px solid #e0e0e0;
}

/* Main heading in hgroup */
hgroup h1 {
  margin: 0 0 10px 0;
  font-size: 32px;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.2;
}

/* Subheading in hgroup */
hgroup h2 {
  margin: 0;
  font-size: 18px;
  color: #666;
  font-weight: 400;
  line-height: 1.4;
}

/* Center aligned hgroup */
hgroup.centered {
  text-align: center;
}

/* Colored hgroup */
hgroup.colored {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 8px;
  border: none;
}

hgroup.colored h1,
hgroup.colored h2 {
  color: white;
}

/* Subtle hgroup */
hgroup.subtle h1 {
  font-size: 28px;
  font-weight: 600;
}

hgroup.subtle h2 {
  font-size: 16px;
  font-style: italic;
  opacity: 0.8;
}

/* Responsive hgroup */
@media (max-width: 768px) {
  hgroup h1 {
    font-size: 24px;
  }

  hgroup h2 {
    font-size: 16px;
  }
}

Hgroup vs Other Heading Approaches

  • <hgroup>: Groups multiple headings as one logical unit in the outline
  • Single <h1> with <p>: Use when subtitle is not a heading but descriptive text
  • Nested <header>: Use for broader grouping including headings and metadata
  • Multiple headings without hgroup: When each heading is independent

Best Practices

  • Only use <hgroup> when headings form a single logical unit
  • Place the most important heading first in the group
  • Don't skip heading levels (e.g., don't jump from h1 to h4)
  • Keep grouped headings related and cohesive
  • Use consistent styling for all hgroups on your site
  • Consider mobile responsiveness for heading sizes
  • Test with screen readers to ensure accessibility
  • Don't use hgroup for purely visual grouping
  • Ensure headings are meaningful even without the group context
  • Use semantic HTML to convey proper document structure

SEO Considerations

  • Search engines understand the relationship between grouped headings
  • The first heading in hgroup typically carries more SEO weight
  • Use keywords naturally in both main and subheadings
  • Grouped headings can improve content structure understanding
  • Proper heading hierarchy helps with SEO and accessibility
  • Don't stuff keywords - keep headings natural and readable

Default CSS Settings

Most browsers will display the <hgroup> element with the following default values:

Default CSS

hgroup {
  display: block;
}

Related Tags