html - <header> 是语义标签还是结构标签

Question

拿这两条标记:

<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>

和

<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>

我的例子可能并不完美，但我想知道标签的目的是为了内容的语义定义，还是使用 CSS 的 block 级结构定义？

这是我的理解from the spec itself ，第一个例子是正确的解释，但我认为第二个例子被吹捧为正确的方式。

你能澄清一下吗？

Answer 1

两者都很好。但是，“结构”与“语义”到底是什么意思？