What is the usage of the <header> tag in HTML?

Question

It is not entirely clear to me what the best usage of the <header> tag is. I have had this minor discussion with someone at my internship and he said you would only like to use the <header> tag inside an <article> tag element. I told him it would not be wrong to use it as the element containing the navigation etc. After talking about this, I am still not sure wether I should use it the way I thought it can be used or the way he tried telling me. On school I also learned that HTML5 is turning to a more semantic way of describing ones document. Is the <header> tag not supposed to be a part of that?

Answer 1

The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section.

Source

Answer 2

Take a look at the official documentation .

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

A sectioning content can be <article> , <aside> , <nav> or <section> ( https://www.w3.org/TR/html5/dom.html#sectioning-content-0 )

It isn't mandator y to use it on an <article> section. Even the examples provided shows that:

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

Regarding you saying

I told him it would not be wrong to use it as the element containing the navigation etc

the definition tells us that is absolutely ok to use it for navigational aids (aka <nav> ).

Answer 3

http://www.w3schools.com/tags/tag_header.asp

Here it even says that the header tag is new in HTML5. And it is used in articles.

The example here uses article: http://www.w3schools.com/html/html5_semantic_elements.asp But it is possible to use it within other semantic tags like nav