Is <header> a semantic or structural tag

Question

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 Conbobulations</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?

Answer 1

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