关于html：为什么HTML5标头元素需要h标签？


Why does the HTML5 header element require a h tag?

根据HTML5Doctor.com和其他HTML5入门网站，header元素应包含h1-h6标签以及其他导航或入门内容。 但是，大多数网站上的传统"标题"仅包含徽标和一些导航元素。

许多主要网站，包括Facebook和Twitter，都使用h1标签作为徽标，这对我来说似乎不合逻辑，因为徽标不是页面上最重要或信息最多的元素。

h1标签出现在95％网站的内容部分中，而不是标题部分中。 那么为什么指示我们在标头中包含h标签呢？ 如果必须，为什么Facebook和Twitter不使用h6标签呢？

您应该看一下HTML5的大纲算法。

您可能希望网站标题/徽标为h1。

想象一个小的网页，它由一个页面标题(徽标，站点名称等)，一个站点导航和一个博客条目(此页面的主要内容)组成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>ACME Inc.</header>

 
 
<ul>
…
</ul>

 

 
  Lorem Ipsum
  <p>
…
</p>
 

</body>

这里唯一的标题是div中的h1。从语义上讲，这意味着该页面的所有内容都在此标题的范围内。请参阅此页面的概述：

  • 洛普伊普森

    • 但这不是真的(以语义方式)：从层次上讲，页面标题为" ACME Inc."。不是博客条目的"一部分"。导航也是如此；这是网站导航，而不是" Lorem Ipsum"的导航。

    因此，网站标题和网站导航需要一个标题。我们也尝试给他们一个h1：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <body>
     <!-- not using sectioning elements, for the sake of the example -->

     <header>
      ACME Inc.
     </header>

     
      Site navigation
     
    <ul>
    …
    </ul>

     

     
      Lorem Ipsum
      <p>
    …
    </p>
     

    </body>

    更好！现在，页面轮廓如下所示：

  • ACME Inc.
  • 网站导航
  • 洛普伊普森

    • 但这仍然不是完美的：它们都处于同一级别，但是" ACME Inc."是什么使所有网页组成一个网站，这就是为什么根本没有网页的关键所在。导航和博客条目是" ACME Inc."的一部分，它代表公司和网站本身。

    因此，我们应该将导航和博客条目的标题从h1更改为h2：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <body>
     <!-- not using sectioning elements, for the sake of the example -->

     <header>
      ACME Inc.
     </header>

     
      Site navigation
     
    <ul>
    …
    </ul>

     

     
      Lorem Ipsum</h2
      <p>
    …
    </p>
     

    </body>

    现在我们有了这个轮廓：

  • ACME Inc.

  • 网站导航
  • 洛普伊普森

    • 这正是示例网页内容的含义。
    (顺便说一句，这也可以在HTML 4.01中使用。)

    如链接中所述，HTML5为我们提供了section元素，它们对大纲起着重要的作用(而不是div，它不会影响大纲)。我们应该使用它们：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <body>

     <header>
      ACME Inc.
     </header>

     <nav>
      Site navigation
     
    <ul>
    …
    </ul>

     </nav>

     
      Lorem Ipsum</h2
      <p>
    …
    </p>
     </article>

    </body>

    轮廓保持不变。我们甚至可以将h2(在nav和article内部)更改回h1，轮廓也将保持不变。

    如果您不希望导航使用"显式"标题，则可以将其删除：轮廓保持不变(现在nav带有隐式/"未命名"标题)。不论是否添加，每个部分都有一个标题。

    您甚至可以将header内的h1更改为h6，并且不会更改轮廓。您可以将此标题视为" body的标题"。

    补充笔记

    • 在这些示例中，不需要header元素。我只添加了它是因为您在问题中提到了它。
    • 如果要使用徽标代替文本名称(" ACME Inc.")，则仍应使用h1并将img作为子级添加。 alt属性的值应给出名称。
    • 顶层标题不必是"页面上最重要或信息量最大的元素"。这不是标题的用途。它们给出结构/轮廓并"标记"其范围内的内容。在此示例中，您可以假定article(其标题位于内部)是最重要的内容。
    • 如果您在需要的时候每次都使用sectioning元素，则不再需要h2…h6(但是为了清晰或向后兼容，您可以自由使用它们)。
    • 您可以使用 HTML Outliner进行测试并测试一些标记结构：http://gsnedders.html5.org/outliner/ (其中有一些未修复的错误)HTML5 Outliner。
    相关讨论

    不要对"应该"包含和"必须"包含感到困惑。您不需要在标头中包含任何内容，但标头的"语义"目的是您应在文档的开头查找并放置此类内容。就像您在打印页面顶部寻找标题或简介或目录一样。

    相关讨论

    对于SEO和基本HTML编程，这是一个灵活但重要的概念。 尽管仍有一定的空间可以通过此标准，但它不会影响您的网站。

    例如，您提到Facebook标头带有徽标，而不是H1。 这是正确的一半，因为它们的标头位于一对h1标记中，从而使其功能与任何其他H1文本基本上相同：

    1
    <i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u>

    同样，这并非完全理想，但他们是Facebook，可以做自己想要的事情。 另一方面，您可能希望在构建站点时更加牢记这些最佳实践。