首页 文章

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

提问于
浏览 次
9

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

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

是这样的大纲：

Untitled Body
  Main Navigation
  MyPage
  etc...

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

+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

html html5 semantic-markup

3 回答

  • 7

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

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

    在 Headers 下使用h1第二个元素：

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

    使用 Headers 下的H1第一个元素：

    <body>
<header>
<nav><h1>My Navigation</h1></nav>
<h1>My Header</h1>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>
    回复于
  • 0

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

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

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

    没问题，因为您可以正确理解页面 Headers 和页面 Headers 的各个部分 .

    这是一个在线outliner，您可以用它来测试您的设计 . 你的 Headers 部分应该高于其他所有部分 .

    回复于
  • 2

    根据specs a <header> 不需要以 <h1> 开头 .

    Headers 元素通常包含节的 Headers （h1-h6元素或hgroup元素），但这不是必需的 . header元素还可用于包装部分的目录，搜索表单或任何相关徽标 .

    回复于

相关问题