Oli.jp

Articles…

HTML5 structure—header, hgroup & h1-h6

In the previous article I discussed the differences between <div>, <section> and <article>. The next pair of new HTML5 elements I’ll discuss are <header> and <hgroup>:

While <header> and <hgroup> are initially easy to confuse, remember that <hgroup> can only contain a ‘heading group’ of <h1>-<h6> elements, and is for subtitles, alternative titles, or taglines. <header> can contain a <h1>-<h6> element or <hgroup> in addition to other elements that introduce the section. If there’s no need for subtitle(s) with <hgroup>, other <header> content, or a style hook, just use the relevant <h1>-<h6> element.

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 #

hgroup example usage; an article title with an alternative title
An article title with an alternative title
hgroup example usage; a site name with tagline (branding phrase)
A site name with tagline (branding phrase)
hgroup example usage; a long article title split into title and subtitle
A long article title split into title and subtitle

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

Example of nesting heading element levels #

<!-- 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>

Example of new-style heading element levels #

<!-- 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

Feedback

Questions? Feedback? Mistakes? let me know via Twitter (@boblet). Tweet about it using this shortlink: http://01i.jp/html5s2

Changes #

  1. Added links to some other HTML5 articles I’ve written
  2. Added text about using <header> as the page header and improved <header>’s description
  3. Added new <header> & <header> + <hgroup> code examples, and removed the unnecessary wrapping <header> in several code examples (1, 2, 3)
  4. Added missing <code> elements that had prevented the example code coloring from working for some examples after a CSS change. Changed from HTML5 to HTML 5 etc.
  5. Changed back from HTML 5 to HTML5 etc :| Also added anchors to titles (on hover) and made a couple of small clarifications.
  6. Rewrote section on HTML5-style heading element levels to make it more accurate.
  7. Finally migrated from boblet.tumblr.com, allowing me to walk the walk with HTML5 templates improvements, & CSS3 enrichment too.
  8. General improvements, including more accurate example code for HTML5-style headings.
  9. Fixed a mistake in <hgroup>; spec says one or more
  10. Fixed some minor terminology and outline mistakes, and made general improvements