@boblet

lest I forget (Oli Studholme)

HTML5 structure—header, hgroup & h1-h6

Note: I’ve moved all my HTML5 articles to http://oli.jp/, so I can walk the walk. I’ll leave this here for posterity, but won’t update it.
→ Go to: “HTML5 structure—header, hgroup & h1-h6” on oli.jp

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

  • <header>—a container element for a section’s introductory and navigational content. This typically contains the section’s heading (an <h1>-<h6> element or an <hgroup> element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. Note that this element can be used in any section of the page (except a <footer> or in another <header>), and is not only for the ‘page header’ containing the logo etc. (W3C:HTML, WhatWG)
  • <hgroup>—a specialised form of <header> that must contain a group (at least two) of <h1>-<h6> elements, and nothing else. It is for grouping a title with subtitle(s). Make sure to maintain <h1>-<h6> hierarchy—think of a nested outline. (W3C:HTML, WhatWG)
  • <h1>-<h6>—the heading elements from HTML4 are back and basically unchanged(*), except for HTML5’s stronger guidance on using them correctly (ie don’t skip levels). Note that a single <h1>-<h6> doesn’t require a <header> wrapper. (W3C:HTML, WhatWG)

While <header> and <hgroup> are 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 an <hgroup> subtitle or other <header> content, 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

Using <header> for the page header#

It’s possible to use <header> for the page header (and <footer> for the page footer too). However, while <header> can contain sectioning elements, it can’t contain <header> or <footer>. For a complex page header or footer that requires nested sectioning 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. Also there are some documents that actually need more than six levels of headings! (actually I always wondered what became of poor <h7>-<h9> :) In HTML5 there are now two ways we can use headings;

  • as in HTML4 with <h1> being the page or article title (or both—nothing says you must only have one <h1> element) and subsequent headings increasing as required
  • & a new way where each section begins with <h1> again

This new way is potentially much easier as most sections will only need one heading element, which means <h1> (almost) everywhere. However current browsers won’t interpret this correctly (eg when CSS is disabled), so unless you actually need more than six levels it’s probably best to stick with the old style for the present.

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 (uses h1 and h2) -->
<article>
  <hgroup>
    <h1>Article title</h1>
    <h2>Article subtitle</h2>
  </hgroup>
  <section>
    <h1>Section title</h1>
    <p>Content…</p>
      <section>
        <h1>Subsection title</h1>
        <p>Content…</p>
      </section>
  </section>
</article>

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

Questions? Feedback? Mistakes? Let me know via Twitter (@boblet)…

Changes:#

  1. 2009-07-07 Added links to some other HTML5 articles I’ve written
  2. 2009-07-13 Added text about using <header> as the page header and improved <header>’s description
  3. 2009-07-14 Added new <header> & <header> + <hgroup> code examples, and removed the unnecessary wrapping <header> in several code examples (1, 2, 3)
  4. 2009-07-22 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. 2009-09-12 Changed back from HTML 5 to HTML5 etc :| Also added anchors to titles (on hover) and made a couple of small clarifications.

Notes

  1. wordpress-developers-uk reblogged this from boblet
  2. psdtohtmlshop reblogged this from boblet
  3. trampoline3f reblogged this from boblet
  4. xn----slbefavdc9aecr2ax8cfbiip9g reblogged this from boblet
  5. lewesde reblogged this from boblet
  6. brazzers-passwords reblogged this from boblet
  7. boblet posted this