- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
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 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.