Why does the HTML5 header element require a h tag?

Question

According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a h1-h6 tag plus other navigational or introductory content. However, the

Answer 1

You should take a look at the outline algorithm for HTML5.

You probably want your site title/logo to be a h1.

Imagine a small webpage, consisting of a page header (logo, site name, …), a site navigation and a blog entry (main content of this page):

 

 
ACME Inc.

 

  
…
 

 

  
Lorem Ipsum
  
…
 

Here the only heading is the h1 inside the div. Semantically this would mean, that all content of this page is in the scope of this heading. See the outline of this page:

1. Lorem Ipsum

But this would not be true (in the semantic way): hierarchically, the page header "ACME Inc." is not "part" of the blog entry. Same goes for the navigation; it's a site navigation, not navigation for "Lorem Ipsum".

So the site header and the site navigation need a heading. Let's try to give them a h1, too:

 

 

  
ACME Inc.
 

 

  
Site navigation
  
…
 

 

  
Lorem Ipsum
  
…
 

Way better! The page outline now looks like:

1. ACME Inc.
2. Site navigation
3. Lorem Ipsum

But it's still not perfect: they are all on the same level, but "ACME Inc." is what makes all the webpages to form a website, it's the whole point why there are webpages at all. The navigation and the blog entry are parts of "ACME Inc.", which represents the company and the website itself.

So we should go and change the navigation and blog entry headings from h1 to h2:

 

 

  
ACME Inc.
 

 

  
Site navigation
  
…
 

 

  
Lorem Ipsum
…

 

Now we have this outline:

1. ACME Inc.
   1. Site navigation
   2. Lorem Ipsum

And this is exactly what the content of the example webpage means. (By the way, this would work in HTML 4.01, too.)

As explained in the link, HTML5 gives us sectioning elements, which play an important role for the outline (instead of div, which doesn't influence the outline) We should use them:

 

  
ACME Inc.
 

 

  
Site navigation
  
…
 

 

  
Lorem Ipsum
…

 

The outline stays the same. We could even change the h2 (inside of the nav and the article) back to h1, the outline would stay the same, too.

If you don't want an "explicit" heading for the navigation, you are free to remove it: the outline stays the same (now with an implicit/"unnamed" heading for the nav). Each section has a heading, whether you add it or not.

You could even change the h1 inside the header to h6 and it wouldn't change the outline. You can think of this heading as the "heading of the body".

Additional notes

• The header element is not needed in these examples. I only added it because you mentioned it in your question.
• If you want to use a logo instead of a textual name ("ACME Inc."), you should still use a h1 and add the img as a child. The value of the alt attribute should give the name then.
• The top level heading doesn't have to be "the most important or most informative element on the page". This is not what headings are used for. They give the structure/outline and "label" their scoped content. In this example, you could assume that the article (with its heading inside) is the most important content.
• If you use the sectioning elements everytime whend needed, you don't need h2…h6 anymore (but you are free to use them, for clarity or backwards compatibility).
• You can play around and test some markup constructs with the HTML Outliner: http://gsnedders.html5.org/outliner/ (it had some unfixed bugs) the HTML5 Outliner.