Question

我正在使用Chrome outliner extension来检查我的页面的语义。在文档主标题标记中的h1之前有任何结构元素似乎是一个问题。我认为顺序无关紧要，但显然确实如此：

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer

是这样的大纲：

Untitled Body
  Main Navigation
  MyPage
  etc...

但是当h1是我标题中的第一个元素时：

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer

它确实如此概述：

MyPage
  Main Navigation
  etc...

为什么？是大纲车，还是我理解HTML5语义中的错误？ W3C规范似乎没有提到它：http://dev.w3.org/html5/spec/Overview.html#the-header-element

Answer 1

重新审视规格后，我同意h1不一定是第一个元素。我怀疑问题在于您使用的Chrome扩展程序。

我通过this HTML outlining tool运行了以下两种方案并收到了相同的结果（我的导航显示在我的标题下）：

标题下的h1第二个元素：

<body>
<header>
<h1>My Header</h1>
<nav><h1>My Navigation</h1></nav>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>

标题下的H1第一个元素：

<body>
<header>
<nav><h1>My Navigation</h1></nav>
<h1>My Header</h1>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>

Answer 2

为什么要在页面标题之外定义另一个<h1>代码？大纲正在为你的页面挑选两个竞争标题，这可能就是被抛弃的原因。从语义上讲，页面的主标题可以存在于页面的<header>部分内的任何位置，只要其唯一并定义您的主标题，尽管这不是<header>部分的专有属性或<h1>标签（意见与该描述不同，但更为合理）。这里定义了正确的大纲http://www.w3.org/TR/html5/sections.html#outline。

您可以使用您想要的任何组合编写主标题部分，只要正确理解即可。所以;

<header>
<nav>
<h1>Title of Page</h1>
<h2>Subtitle</h2>
</header>

很好，因为您可以正确理解页面标题和页面标题的各个部分。

以下是您可以用来测试设计的在线outliner。您的标题部分应首先高于其他所有内容。

Answer 3

根据specs，<header>并不需要以<h1>开头。

标题元素通常包含节标题（h1-h6元素或hgroup元素），但这不是必需的。该 header元素也可用于包装section的目录，搜索表单或任何相关徽标。

h1是否需要成为头标记中的第一个语义元素？

3 个答案: