HTML5 header structure – header, hgroup and h1-h6

The <header> and <hgroup> tags are new for HTML5, we all know that <h1> – <h6> has vital importance in SEO to get keywords ranked on search engines such as Google.

But it’s not as easy to understand the use for the new tags.

<header>

This tag can contain any type of content that is related to a page header. Logotype, top navigation or a h1. It can even contain tables, search form anything really that is related to a header. It can be used in any section of the page except <footer>, <address> or in another <header> element.

<hgroup>

A special header element that must contain at least two <h1> – <h6> and nothing else. It’s a group of titles with subtitles. Make sure to maintain <h1> – <h6> hierarchy.

<h1> – <h6>

Same definition as in HTML4, but they don’t have to wrapped around <header> or <hgroup>.

Article with one title

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

A article header with title and metadata

<!-- title and meta in header -->
<article>
  <header>
    <h1>Article title</h1>
    <p>Tags: foo, bar</p>
  </header>
  <p>Content</p>
</article>

An article with an <hgroup>

<!-- h1 and 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>Tags: foo, bar</p>
  </header>
  <p>Content</p>
</article>

Themedy Thesis & Genesis Skin Club

Themedy is a premium skin marketplace offering quality child themes for the some of the most popular Wordpress frameworks like Thesis & Genesis. Read more