HTML <hgroup> Element

Publish in HTML Tutorial el 24/05/2025 15:17

The <hgroup> element is used to group a set of heading elements (<h1> to <h6>) when you have multiple levels of headings that belong together semantically. This element is particularly useful for creating subtitle relationships without affecting the document outline.

Key Features:

Groups multiple heading elements into a single unit
Only affects the document outline with the highest-level heading
Useful for creating subtitle relationships
Helps maintain proper document structure

Basic Syntax

Rendered Example

Main Title

Subtitle

Usage Examples

Example 1: Basic hgroup with two headings

This shows a simple hgroup containing a main title and subtitle.

Play Code

<hgroup>
  <h2>Welcome to Our Website</h2>
  <h3>Discover amazing content</h3>
</hgroup>

Example 2: hgroup with three heading levels

Demonstrating how hgroup can contain multiple heading levels.

Play Code

<hgroup>
  <h1>CSS Tutorial</h1>
  <h2>Learn Modern Styling</h2>
  <h3>Flexbox and Grid Systems</h3>
</hgroup>

Example 3: hgroup with styling

Showing how to style an hgroup element and its contents.

Play Code

<style>
  hgroup {
    font-family: 'Arial', sans-serif;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 2rem;
  }
  hgroup h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  hgroup h2 {
    font-size: 1.5rem;
    font-weight: normal;
    color: #7f8c8d;
  }
</style>

<hgroup>
  <h1>Product Launch</h1>
  <h2>Coming this Fall 2023</h2>
</hgroup>

Example 4: hgroup with JavaScript (Dynamic Content)

Using JavaScript to dynamically update hgroup content.

Play Code

<hgroup id="dynamic-hgroup">
  <h2>Current Status</h2>
  <h3>Loading...</h3>
</hgroup>

<script>
  setTimeout(() => {
    const hgroup = document.getElementById('dynamic-hgroup');
    hgroup.querySelector('h3').textContent = 'Content Loaded Successfully!';
  }, 2000);
</script>

Example 5: hgroup with JavaScript (Toggle Visibility)

Using JavaScript to toggle the visibility of an hgroup element.

Play Code

<hgroup id="toggle-hgroup">
  <h2>Toggle Example</h2>
  <h3>This content can be shown/hidden</h3>
</hgroup>

<button onclick="document.getElementById('toggle-hgroup').classList.toggle('hidden')">
  Toggle hgroup
</button>

<style>
  .hidden { display: none; }
</style>

Tips and Best Practices

Use hgroup when you have multiple heading levels that belong together semantically
Only the highest-level heading in the hgroup will contribute to the document outline
Don't use hgroup for unrelated headings - it's meant for heading/subtitle relationships
Style hgroup elements consistently throughout your site for better UX
Combine with ARIA attributes when needed for better accessibility
Remember that screen readers will still read all headings within the hgroup

Browser Support

The <hgroup> element is widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, some older browsers might not recognize it as a semantic element, though they will still render the content.