HtmlConceptBeginner · 3 min read

What is hgroup in HTML: Definition and Usage

The hgroup element in HTML was used to group multiple heading elements (h1 to h6) to create a single heading with subheadings. It helped browsers and assistive technologies understand that these headings belong together as one unit. However, hgroup is now obsolete and should be avoided in modern HTML.

⚙️

How It Works

The hgroup element acted like a container for a main heading and its related subheadings. Imagine a book chapter title with a subtitle underneath it; hgroup grouped these so they were treated as one heading block.

This grouping helped screen readers and search engines understand that the headings inside hgroup were connected, not separate sections. It was like putting a frame around a title and subtitle to show they belong together.

However, because it caused confusion and inconsistent support across browsers, the hgroup element was removed from the official HTML specification and is now considered obsolete.

💻

Example

This example shows how hgroup was used to group a main heading and a subtitle.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hgroup Example</title>
</head>
<body>
  <hgroup>
    <h1>Main Title</h1>
    <h2>Subtitle or Tagline</h2>
  </hgroup>
  <p>This groups the main title and subtitle as one heading unit.</p>
</body>
</html>

Output

Main Title Subtitle or Tagline This groups the main title and subtitle as one heading unit.

🎯

When to Use

Since hgroup is obsolete, it is best not to use it in new projects. Instead, use semantic HTML by placing headings and subheadings in a clear structure without grouping them inside hgroup.

For example, use a main heading (h1) followed by a subheading (h2) directly, and use CSS to style them as needed.

Use clear heading levels to help screen readers and search engines understand your page structure. Grouping headings visually can be done with CSS rather than HTML elements like hgroup.

✅

Key Points

hgroup grouped multiple headings as one unit.
It helped show a main heading with subheadings together.
The element is now obsolete and not supported in modern HTML.
Use clear heading levels and CSS for styling instead.
Accessibility and SEO work better with proper heading hierarchy.

✅

Key Takeaways

hgroup grouped headings but is now obsolete and should not be used.

Use clear heading levels (h1 to h6) without hgroup for better accessibility.

Style headings visually with CSS instead of grouping them in HTML.

Proper heading structure helps screen readers and search engines understand your content.

Always use semantic HTML and avoid deprecated elements like hgroup.