An article with one title #

<!-- Title h1 only — no hgroup or header needed -->
<article>
  <h1>Article title</h1>
  <p>Content…</p>
</article>

A article header with title and metadata #

<!-- Wrapping title and metadata in header -->
<article>
  <header>
    <h1>Article title</h1>
    <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
  </header>
  <p>Content…</p>
</article>

An article with an <hgroup>-enclosed subtitle #

<!-- Title h1 and subtitle h2 in hgroup -->
<article>
  <hgroup>
    <h1>Article title</h1>
    <h2>Article subtitle</h2>
  </hgroup>
  <p>Content…</p>
</article>

A article with title, subtitle and metadata #

<!-- A heading which uses header and hgroup -->
<article>
  <header>
    <hgroup>
      <h1>Article title</h1>
      <h2>Article subtitle</h2>
    </hgroup>
    <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
  </header>
  <p>Content…</p>
</article>

Some examples of <hgroup> use #

Using <header> for the page header #

When <header> (or <footer>, which we’ll meet soon) don’t have a sectioning content parent they apply to the entire page. This means we can use <header> for the page header (and <footer> for the page footer too). However, while <header> can contain sectioning content elements, it can’t contain <header> or <footer>. For a complex page header or footer that requires nested sectioning content elements with their own headers and footers use <section> instead.

HTML5-style heading element levels #

In HTML authors should use the heading elements <h1>-<h6> rationally — using the levels to indicate nesting, and not skipping levels — but this can be a problem in long or complex documents. There are some documents that actually need more than six levels of headings! (Actually I always wondered what became of poor <h7>-<h9> :-) Also the “correct” heading level’s default style will sometimes need overriding to get the right visual presentation.

In HTML5 there are now two ways we can use headings;

• As in HTML 4 where the heading element (<h1>-<h6>) dictates the level of the content’s importance (think of making an outline). <h1> is used for the page or article title (or both — you can have more than one <h1> element), and subsequent headings increase rationally as required to indicate the outline.
• A new way introduced in HTML5 where the nesting of sectioning content elements dictates the document outline. This means the first heading content element inside a sectioning content element becomes that section’s header, regardless of whether this skips levels.

This new way is potentially much easier as heading levels in the document’s outline become separate from the heading element used (and how the element is styled using CSS). As most sections will only need one heading element you could just use <h1> (almost) everywhere, styling based on number of <section> parents. However current browsers won’t interpret this correctly (eg when CSS is disabled), and this requires advanced CSS selector support to style.

Alternatively, because explicit <section>s allows skipping of levels you can use whatever headings you want (e.g. based on CSS styles) without worrying about skipping levels. Stylistic exceptions such as subtitles can be addressed via styles for <hgroup> or classes when needed.

In HTML5, every <h1>-<h6> not in an <hgroup>, and every <hgroup>, generates an implied section. Because of this it’s recommended to add explicit sectioning wrappers. If you don’t, make sure you don’t skip heading levels! Read more about this in Sectioning & heading elements, and outlines

<!-- Standard nesting of heading elements (uses h1 to h4) -->
<article>
  <hgroup>
    <h1>Article title</h1>
    <h2>Article subtitle</h2>
  </hgroup>
  <section>
    <h3>Section title</h3>
    <p>Content…</p>
      <section>
        <h4>Subsection title</h4>
        <p>Content…</p>
      </section>
  </section>
</article>

<!-- HTML5-style heading levels—new section resets (h3 is skipped intentionally so the subsection’s title uses h4 styles) -->
<article>
  <hgroup>
    <h1>Article title</h1>
    <h2>Article subtitle</h2>
  </hgroup>
  <section>
    <h2>Section title</h2>
    <p>Content…</p>
      <section>
        <h4>Subsection title</h4>
        <p>Content…</p>
      </section>
  </section>
</article>

Both of these will produce the same HTML5 outline:

1. Article title
   1. Section title
      1. Subsection title

In the next exciting installment, the last of the structural tags and a look at sectioning elements and outlines…