Question

不是<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样式只是用于语义标记。我可以想到用这个创造的造型障碍，所以不要百分之百满意。

或者这是否有效。

<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?这看起来我坚持第二个解决方案因为我不喜欢没有标题的想法

不要害怕回答;）

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

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

1 个答案: