hgroup element - <hgroup>
The <hgroup> element is used to group a set of heading (<h1..h6>) elements where each heading elements either contains a title or a sub-title. The following diagram shows the use of a <hgroup> element. The source code is illustrated in the first example. The word "HTML5" is the title using <h1> and the phrase "An Evolution of the Most Widely used Technology in the World." is the subtitle using <h2>. A <hgroup> element is used to group both the <h1> and <h2> elements together.
One of the questions often asked is the rationale behind the <hgroup> element. For example, it is possible to use the heading elements (<h1..h6>) on titles and sub-titles without the use of the <hgroup> element and you can still preserve the look-and-feel of the web page.
The main rationale behind the <hgroup> element is document outlining. By using the <hgroup> element, software programs can identify titles and their related sub-titles
and generate a document outline easily. Hence the <hgroup> elements allow the related titles to be grouped together which is not achievable by just using the heading elements.
The example below illustrates the use of the <hgroup> element. An external software program will be able to determine that the phrase "An Evolution of the Most Widely used Technology in the World." as the sub-title of "HTML5".
<h2>An Evolution of the Most Widely used Technology in the World.</h2>