basics of website design banner photo

HTML

HTML 5

CSS 2.1

CSS 3

Reference

HTML5 <hgroup> Element

The <hgroup> element represents the heading of a section and is used to group together <h1> to <h6> heading elements used in a document section which has multiple levels such as subheadings, alternative titles or taglines.

This element can only contain one or more <h1> to <h6> elements immediately following each other, no other elements are allowed within an <hgroup> element.

The document outline and <hgroup>.

The introduction of the <hgroup> element is closely linked to the document outline which has become part of the HTML5 draft. The document outline is essentially a map of the structure of a document made up of the important structural elements of the document in question.

This outline can be used by assistive technologies such as screenreaders to provide a concise page structure for easier access and by machines such as search engines for improving search results.

Headings would normally be part of the document outline as they indicate parts of the page that are of greater importance, but when placed inside an <hgroup> element only the top-level heading is shown in the document outline, the other headings are passed over as they are not primary document content.

In this way the <hgroup> element ensures that the document outline is uncluttered by non-essential headings and more suited to its function - a representation of the important elements of the document/page.

NOTE: From the name and usage you would think that there needs to be more than one heading element in the <hgroup> but the specification says one or more.

<hgroup> Attributes

New HTML5 Elements