<hgroup> : Heading Group element

by

Introduction

The <hgroup> element represents a heading and related content. It groups a single <h1> – <h6> element with one or more <p>.

It was intended to help with document outlining and provide better semantic structure for web pages, especially in cases where multiple headings were used for a single title or headline.

Here is an example of this :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <hgroup>
      <h1>Main Heading</h1>
      <h2>Subheading</h2>
    </hgroup>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur expedita rerum quo doloremque totam reprehenderit repellat ut, temporibus fugiat recusandae obcaecati dolore laboriosam, suscipit dicta sequi non quasi placeat voluptatem.</p>
</body>
</html>

Output :

In practice, however, it didn’t offer significant benefits over using a single <h1> followed by other lower-level headings. Therefore, web developers were encouraged to use appropriate heading levels (from <h1> to <h6>) without nesting them within an <hgroup> element.

Leave a Comment