Is <header> a semantic or structural tag

Take these two pieces of markup:

<div id="header">
  <img src="/img/logo.png" alt="MyLogo" />

  <ul id="misc-nav">
    <li>..</li>
  </ul>

  <header>
    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
    <p>The smell of invention awaits you...</p>
  </header>
</div>

and

<header>
  <img src="/img/logo.png" alt="MyLogo" />

  <ul id="misc-nav">
    <li>..</li>
  </ul>

  <h1>Welcome to Bob's Website of Fantastical Co开发者_运维知识库nbobulations</h1>
  <p>The smell of invention awaits you...</p>
</header>

My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?

It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.

Can you offer any clarity on it?

---

Both are fine. But what exactly do you mean by "structural" vs "semantic"?

---

It's your first method (semantically).

The < header> tag defines an introduction to the document.

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>

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

Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element

---

The header tag purely semantic. However, in fact all HTML tags are to provide a context to the content (= semantics).

Use CSS to style your content approperiately.

---

I would advocate the following combination of markup and CSS:

In your CSS:

header {
    background: #fff url(/img/logo.png) top left no-repeat;
    padding-left: 64px; /* or whatever required to display margin correctly */
}
/* if you REALLY want your navigation to appear as a bulleted list */
nav a { 
    display: list-item; 
} 

In your page markup:

<nav>
  <a>...</a>
  <a>...</a>
</nav>
<header>
  <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
  <p>The smell of invention awaits you...</p>
</header>

This way you're using the semantic <header /> and <nav /> tags to mark up text content, and then using CSS to enhance the presentation with display formatting, logo images, etc.

I recall - although alas I can't find the sources now - that the proposed new elements in HTML5 (header, nav, footer, aside, article, etc.) were chosen based on analysis of Google's database of websites to identify the most commonly-used ID attributes assigned to DIV elements, figuring that those represented the most common scenarios where developers were using DIVs to wrap meaningful elements of their page structure.

---

HTML5 actually does away with block/inline distinction in favour of a more nuanced content model. The header element is flow content, which is like the default state for HTML5 elements. Semantically it should be considered as introductory information for its nearest section content or sectioning root ancestor.

I think both your examples are valid uses of the element, though I personally would probably markup your first one this way:

<header>
  <img src="/img/logo.png" alt="MyLogo" />
  <nav>
    <ul>
      <li>..</li>
    </ul>
  </nav>
  <hgroup>
    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
    <h2>The smell of invention awaits you...</h2>
  </hgroup>
</header>

---

I used to think that the first method is the proper way to use the element, as it is intended to provide relevant information for a given section it is included in, not being a section itself, besides we already have elements for structuring the content, but for what i've seen in some pages, the reason many people includes also a header element at root level is to provide that same information considering the whole page as a big section, so i've changed my mind to think both of the examples can be considered correct.

---

If you read the W3C HTML5 specification you will find that every html page should have only one H1 tag, so if you use h1 then h2 then h3 you might see some weird styling. That is because the browser expect one h1 on every html page when it parses it.

So you can instead use h1 h2 h3 tags and style them any way you want.

The point of using semantic html elements is because your website will be 'read' not only by web browsers but also by web crawlers, tools that read the page with voice, braile tools and many more applications and physical tools.

So when those applications read your website they don't read css, only html and might read some javascript. So when they see lang="en" they know to read the contents in the element in english etc. When they see "section" they know it's section element and when they see "aside" they know it is some aside element etc.

We can easy see the page and know what is what, but visually impaired and other people can't do that so for them this will be of great help. Think about that when you make your websites, think about all the people that will access it and how easy will be for them to do that.

That is the whole point of the new awesome html5 elements. You can make the same webpage just with one element - "div" for example, and with a whole range of new html5 semantic elements - article, section, header, footer, aside etc. The webpage will look the same in web browsers, but smart applications like search engine robots will crawl the page better and some applications that read web pages will parse the page more easily.

The point of web is to be open to all people and free, and I agree to that.

In the future, the web will evolve without doubt, new tools will be made that will parse web pages, and using new html5 semantic elements will make your webpages future proof, so these new tools will read our pages in smart way.

Hope this helped someone :)