Home > Articles > Web Development > HTML/CSS

This chapter is from the book

This chapter is from the book

Beginner Recipe: Using the hgroup Element to Group Headings

Using another new HTML5 element, the hgroup element, you can add further information to your header element.

This element is used to group more than one related h1-6 headings. So, if your site has a subheading, you could use the element shown in Listing 1.3, which generates the layout in Figure 1.4. Although it is a useful grouping option, hgroup is primarily intended to tell the document outline (which we will discuss later) which of the headings is most important. In Listing 1.3, the document outline will exclude all headings except the highest one, in this case, the h1.

Figure 1.4

Figure 1.4 Website with a main logo and a subheader. These would be inside an hgroup element.

Listing 1.3. Excluding All Headings Except h1

<header>
  <hgroup>
    <h1><a href="#">HTML5 Cookbook</a></h1>
    <h2>Delicious HTML5 recipes</h2>
  </hgroup>
</header>

In Listing 1.3, the h2 is relevant to the content of the h1, so in this instance you can use an hgroup. If you have just one h1-6 heading, you do not need to use hgroup.

  • + Share This
  • 🔖 Save To Your Account