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进行块级结构定义？

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

你能说清楚吗？

Answer 1

这是你的第一种方法（语义上）。

＆lt;报头GT;标签定义了一个该文件的介绍。

<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

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

Answer 2

两者都很好。但你究竟是什么意思“结构”与“语义”？

Answer 3

标头标签纯粹是语义的。但是，实际上所有HTML标记都是为内容提供上下文（=语义）。

使用CSS批量设置内容的样式。

Answer 4

我会提倡以下标记和CSS的组合：

在你的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; 
}

在您的页面标记中：

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

通过这种方式，您可以使用语义<header />和<nav />标记来标记文本内容，然后使用CSS通过显示格式，徽标图像等来增强演示文稿。

我记得 - 虽然唉我现在找不到消息来源 - HTML5中提出的新元素（标题，导航，页脚，旁边，文章等）是根据Google的网站数据库分析来选择的分配给DIV元素的最常用ID属性，确定这些属性代表了开发人员使用DIV来包装其页面结构的有意义元素的最常见场景。

Answer 5

HTML5实际上取消了阻止/ {3}}的阻止/内联区别。 header元素是a more nuanced content model，它类似于HTML5元素的默认状态。在语义上，它应被视为最近的flow content或section content祖先的介绍性信息。

我认为你的两个例子都是元素的有效用法，尽管我个人可能会用这种方式标记你的第一个：

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

Answer 6

我曾经认为第一种方法是使用元素的正确方法，因为它旨在为它所包含的给定部分提供相关信息，而不是一个部分本身，此外我们已经有了构造元素内容，但对于我在某些页面中看到的内容，很多人在根级别包含头元素的原因是提供相同的信息，考虑整个页面作为一个大的部分，所以我改变了主意思考两个例子都可以认为是正确的。

Answer 7

如果您阅读W3C HTML5规范，您会发现每个html页面都应该只有一个H1标签，所以如果你使用h1然后h2然后h3你可能会看到一些奇怪的样式。这是因为浏览器在解析每个html页面时期望一个h1。

所以你可以改用h1 h2 h3标签并按照你想要的方式设置它们。

使用语义html元素的关键在于，您的网站不仅可以通过网络浏览器“阅读”，还可以通过网络抓取工具，使用语音阅读页面的工具，braile工具以及更多应用程序和物理工具进行“阅读”。 p>

因此，当这些应用程序读取您的网站时，他们不会读取CSS，只能读取HTML并且可能会读取一些javascript。因此，当他们看到lang =“en”时，他们知道用英语等读取元素中的内容。当他们看到“section”时，他们知道它的section元素，当他们看到“side”时，他们知道它是一些旁边的元素等。 / p>

我们可以很容易地看到页面并知道什么是什么，但视力障碍者和其他人不能这样做，所以对他们来说这将是非常有帮助的。想想当你制作网站时，想想所有会访问它的人以及他们这样做会有多容易。

这是新的令人敬畏的html5元素的重点。您可以使用一个元素（例如“div”）创建相同的网页，并使用一系列新的html5语义元素 - 文章，部分，页眉，页脚，旁边等。网页在Web浏览器中看起来相同，但是搜索引擎机器人等智能应用程序将更好地抓取页面，而一些阅读网页的应用程序将更容易解析页面。

网络的目的是向所有人开放并且免费，我同意这一点。

将来，网络将毫无疑问地发展，将制作解析网页的新工具，并且使用新的html5语义元素将使您的网页面向未来，因此这些新工具将以智能方式读取我们的网页。

希望这有助于某人：）

<header>是语义或结构标记</header>

7 个答案: