HTML5 elements - <header> tag

[csdude55]

So I'm reading mixed information on the <header> tag, so I'm hoping for some clarity.

On this site, would the <header> tag go around the top blue part (logo, navigation, and search bar), with a nested <nav> tag around the navigation menu? Or would it go around the subject and meta description... which, on this site, would be in place of:

<div class="col-md-12 col-sm-12">
 <h1 class="title">Subject</h1>
 <h2 class="sub-title">Meta Description</h2>
</div>

Looking at the source for this page, I see that it's defined for HTML5 and uses the <nav> tag, but it doesn't use the <header> tag, so that didn't give me any clues.

To me, it makes more sense for it to go around the top blue part, but I'm just not sure what's technically correct.

Further, what, exactly, does using the <header> tag (or any HTML5 tag) accomplish, other than slightly easier to read? Is the goal for search engines to look at something in the <header> tag as more or less relevant than something in the <article> tag?

[Andy Langton]

There's no rigid spec for HTML5, although what's out there does provide some guidance:

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.A header element is intended to usually contain the section's heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

W3 [w3.org] [emphasis mine]

The HTML Header Element (<header>) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name

Mozilla [developer.mozilla.org]

So, if it can be either a site-wide header (probably the most common usage) or a header for a specific section. As with <footer>, it's possible to use both on one page. If you were to use one for your H1/description element, this would need to be a new section of the page - there are numerous sectioning elements, including <section>.

[csdude55]

Awesome, thanks :-)

Do you have any idea if it has any impact on search engines yet? Are they more likely to view a <header> section as being more important (especially if it includes H1-H6 elements), or less important (thinking that the top part of a site is less relevant to the content of the page)?

Using this site as an example, the word "Webmaster" is in the blue section (in the navigation). So if that blue section were a <header> tag, would "Webmaster" be seen as more relevant to the page, less relevant to the page, or would the <header> tag make no difference in how the keyword was viewed?

[Andy Langton]

I've found it makes no real difference. The problem is that the overwhelming majority of sites have less than optimal coding practices, and technical skills do not necessarily equate to relevant pages. So, it doesn't really make sense to favour those with better code. In addition, Google has moved more towards a more "visual" model in determining where the main content of a page is, as well as, no doubt, having legacy code to identify sections of a page. And that's more designed to identify less valuable content that for giving sites a relevance boost.

That said, by adopting good practices, you are at least "future proofed" and can also know that there aren't code issues that would detract from relevance. But I wouldn't expect any noticeable difference if (say) you wrapped an existing page section with a <header> section.

[topr8]

i'm in complete agreement with Andy_Langton for the exact same reason:

The problem is that the overwhelming majority of sites have less than optimal coding practices, and technical skills do not necessarily equate to relevant pages. So, it doesn't really make sense to favour those with better code.

having said that, any new site and all updated development i've done in the last year has been done with fully semantic html5 code - although with some elements, in my view, the specs are not exactly crystal clear as to how they should be used.

for

<header>

in my case, i use it to wrap, the logo and the top navigation (as well as search box and a shopping cart summary that we show at the top), i don't use it on other parts of the page. likewise the <footer> in the case of WebmasterWorld, i'd use it for the dark blue bit at the bottom.

i feel my use of header/footer, hasn't made any difference to se rankings ... but you never know in the future and also it's just as easy to do it 'right' as not, so that's why we now do it.