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

Question

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

htmlsemantic-websemantic-markupschema.org

3

没有 <header> 是不好的吗？

我有这个基本结构，但我正在考虑将一个标题包裹在 body 开始和内容之间的所有内容中，因为标题也带有这个漂亮的 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样式。但我认为这会造成样式屏障，所以对此并不完全满意。

或者这是有效的吗？

<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?，看起来我会选择第二个解决方案，因为我不太喜欢完全没有页眉的想法。

不要害怕回答；）

- redanimalwar

没有<header>标签会有问题吗？- 完全没有问题...... 多个<header>标签也是有效的。 - Mr. Alien

多个头部是有效的吗？我想这对我来说很完美，那我就做3个<headers>。 - redanimalwar

是的，但是 - http://www.w3.org/TR/html-markup/header.html - Mr. Alien

什么但是？我的意思是全局页面上有多个标题，而不是在单独的部分中。我更新了以解释我的意思。 - redanimalwar

我已经下定决心了。我决定对我来说这是不好的，我想在每一页上都有页眉。 - redanimalwar

“标题内的一个部分无效，对吧？”：是有效的。 - unor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- unor · Accepted Answer

针对每个分块根元素（例如body），以及每个分块内容元素（例如article），决定它们是否包含适合用作header的内容。规范定义了 "介绍性内容"，并给出以下示例：

介绍性或导航辅助功能
标题（一个 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>