Proper HTML5 <header> and heading usage

Question

I understand that it is semantically acceptable to use multiple header elements per page. According to http://html5doctor.com/the-header-element/, the main restriction on its usage is that it is supposed to contain a heading element.

It seems logical then, that each <header> sort of resets the hierarchy of headings -- so the heading I am using in each <header> should be a <h1>. But this results in more or less only <h1>s ever being used, as I rarely need to include a subheading in a given header.

My question is, which is the more appropriate usage of headings inside headers -- should they follow the hierarchy of headings on a page (so a more insignificant header would have, say, a <h4> heading), or is it okay to set the heading of a given header as <h1> most of the time, as it does in fact represent the heading of that particular header, not the page?

Answer 1

It seems logical then, that each <header> sort of resets the hierarchy of headings […]

This is not the case. Only sectioning content elements (section, article, aside, nav) and heading elements (h1-h6) have an influence on the heading hierarchy resp. the document outline.

[…] so the heading I am using in each <header> should be a <h1>

No. This may create a wrong document outline in some cases. The rule should be:

The headings first heading you are using in each sectioning content element (section, article, aside, nav) (resp. sectioning root elements like body) may be h1. May, not must.

Simply ignore header for making the decision which headings to use.

You can have a section with h1 but without header.
You can have a section without h1 but with header.
You can have a section without h1 and without header.
You can have a section with h1 and with header, but the h1 not being a child of header.

If you should use h1 everywhere or also h2-h6? Both ways are allowed (in case you use the sectioning content elements correctly). The HTML5 (CR) spec recommends (bold by me):

Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.

So if you want to follow this recommendation, use the headings elements of the corresponding heading levels (but if you need more than six levels, this is not possible to achieve, of course).

Pro: Better backwards compatibility (older user agents that don’t support sectioning content elements can still understand the outline)

Contra: Less flexibility (if you move/paste content, you’d need to adjust the heading levels)

Answer 2

The rule of thumb on using h1-h6 should be regarding accessibility and SEO, for this reason, you should only use one h1 per document and then all subsequent usage be h2-h6. You should also not skip levels, this is per the W3C, so you would end up using many h2, but consider knowing whether you are nesting, in which case you should properly sequence.

The header element is just a container, so don't assume that you should reset the order sequence, think of it as a div or any other container element. The reason you really want to use the header element is to offer better SEO and accessibility to your content while also perhaps grouping multiple elements, I would say you do not need to use the header element if you are only nesting a single h1-h6 with no sibling element and your layout does not need it, as this adds bulk to your DOM tree that is not needed.

Interesting article that I agree with the interpretation: http://www.hobo-web.co.uk/headers/