没有主 <header> 的 HTML 5 页面？答案

【问题标题】：HTML 5 Page without main <header>?没有主 <header> 的 HTML 5 页面？
【发布时间】：2014-04-16 17:46:19
【问题描述】：

没有<header>是不是很糟糕？

我有这个基本结构，但我正在考虑在正文开始和内容之间的所有内容周围包装一个标题，因为标题还附加了这个漂亮的 shema.org 标记。好主意？

只是因为有时标题不存在，但导航栏实际上包含品牌名称，并且它们本身就是标题。

如果我这样做，我现在应该如何标记<header>？标题内的部分无效对吗？我猜只是普通的<div>。

<body>

<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>

<div>content ...

到这里

<body>
<header itemtype="http://schema.org/WPHeader" ...>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<div><h1>brandname</h1><p>slogan</p></div> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
</header>
<div>content ...

多个标题无效或者？我认为它是使用 <header> 没有任何 CSS 样式只是用于语义标记。我可以想到用这个创建的样式障碍，所以对此不是 100% 满意。

或者这是有效的。

<body>

<header class="nav1"><h1>brandname</h1><nav>...</nav></header>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<header class="nav2"><h1>brandname</h1><nav>...</nav></header>

<div>content ...

// 刚刚阅读html5: using header or footer tag twice? 这个，看起来我坚持使用第二种解决方案，因为我真的不喜欢没有标题的想法

不要害怕回答;)

【问题讨论】：

没有<header>是不是很糟糕？ - 完全没问题...... 多个标题要么无效吗？ -完全有效
多个标题有效？我想这对我来说是完美的，然后我做了 3 ´`。
是但是 - w3.org/TR/html-markup/header.html
但是呢？我的意思是全局页面上有多个标题。不在单独的部分。我更新以解释我的意思。
我已经下定决心了。我认为这很糟糕，我希望在每一页上都有一个标题。

标签： html semantic-web semantic-markup schema.org

【解决方案1】：

确定每个分段根元素（例如，body）和每个分段内容元素（例如，article）是否包含适合header 的内容。规范defines 用于“介绍性内容”，并给出以下示例：

介绍性或导航帮助
标题（h1–h6 元素）（非必需）
目录、搜索表单或任何相关徽标

如果有这样的内容，请使用header 元素。如果该分段根/内容元素中的内容是分散的，请使用多个 header 元素。

请记住，header 始终适用于“其最近的祖先分段内容或分段根元素”：

<body>
  <header> <!-- this header is for the whole page --> </header>

  <article>
    <header> <!-- this header is for the whole article element --> </header>

    <div>
      <header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
    </div>

    <section>
      <header> <!-- this header is for this article’s section element only --> </header>
    </section>

  </article>

  <figure>
    <header> <!-- this header is for the figure element only --> </header>
  </figure>

  <strong>
    <header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
  </strong>

</body>

【讨论】：

我已经知道了这一切，我决定选择我的第二个解决方案。