Question

根据HTML5Doctor.com和其他HTML5介绍性网站，标题元素应包含h1-h6标记以及其他导航或介绍内容。但是，大多数网站上的传统“标题”仅包含徽标和一些导航元素。

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

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

Answer 1

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

想象一个小网页，包括页面标题（徽标，网站名称，...），网站导航和博客条目（此页面的主要内容）：

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>ACME Inc.</header>

 <div class="navigation">
  <ul>…</ul>
 </div>

 <div class="content">
  <h1>Lorem Ipsum</h1>
  <p>…</p>
 </div>

</body>

此处唯一的标题是h1内的div。从语义上讲，这意味着，此页面的所有内容都在此标题的范围内。请参阅本页大纲：

Lorem Ipsum

但这不是真的（以语义方式）：层次结构，页面标题“ACME Inc.”不是博客条目的“一部分”。导航也一样;这是一个网站导航，而不是“Lorem Ipsum”的导航。

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

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <div class="navigation">
  <h1>Site navigation</h1>
  <ul>…</ul>
 </div>

 <div class="content">
  <h1>Lorem Ipsum</h1>
  <p>…</p>
 </div>

</body>

方式更好！页面大纲现在看起来像：

ACME Inc。
网站导航
Lorem Ipsum

但它仍然不完美：它们都处于同一水平，但“ACME Inc.”是什么使所有的网页形成一个网站，这就是为什么有网页的全部意义。导航和博客条目是“ACME Inc.”的一部分，代表公司和网站本身。

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

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <div class="navigation">
  <h2>Site navigation</h2>
  <ul>…</ul>
 </div>

 <div class="content">
  <h2>Lorem Ipsum</h2
  <p>…</p>
 </div>

</body>

现在我们有了这个大纲：

ACME Inc.
1. 网站导航
2. Lorem Ipsum

这正是示例网页的含义的内容。（顺便说一下，这也适用于HTML 4.01。）

正如链接中所解释的，HTML5为我们提供了分段元素，它们对大纲起了重要作用（而不是div，它不影响大纲）我们应该使用它们：

<body>

 <header>
  <h1>ACME Inc.</h1>
 </header>

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

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

</body>

轮廓保持不变。我们甚至可以将h2（nav内部和article）更改回h1，大纲也会保持不变。

如果您不想要导航的“显式”标题，您可以自由删除它：轮廓保持不变（现在使用nav的隐式/“未命名”标题）。无论您是否添加标题，每个部分都有一个标题。

您甚至可以将h1内的header更改为h6，但不会更改大纲。您可以将此标题视为“body”的标题。

附加说明

这些示例中不需要header元素。我只是添加了它，因为你在问题中提到过它。
如果您想使用徽标而不是文字名称（“ACME Inc.”），您仍应使用h1并在孩童时添加img。 alt属性的值应该是名称。
顶级标题不一定是“页面上最重要或最具信息性的元素”。这不是标题的用途。它们给出结构/轮廓并“标记”它们的范围内容。在此示例中，您可以假设article（其内部标题）是最重要的内容。
如果您每次都需要使用切片元素，则不再 h2 ... h6（但为了清晰或向后，您可以自由使用它们兼容性）。
您可以使用 ~~HTML Outliner来测试一些标记构造：http://gsnedders.html5.org/outliner/~~ （它有一些不修复的错误）HTML5 Outliner。

Answer 2

不要因“应该”包含和“必须”包含而感到困惑。您不需要在标题内部包含任何您不想要的内容，但标题的“语义”目的是您应该在文档的头部查找并放置此类内容的位置。正如您在打印页面顶部查找标题或介绍或目录一样。

Answer 3

这是SEO和基本HTML编程的灵活但重要的概念。虽然通过这个标准有一些摆动的空间，但它不会影响您的网站。

例如，您提到Facebook的标题中有徽标而不是H1。这是正确的，因为它们在一对h1标签中有它们的标题，使其功能与任何其他H1文本的功能基本相同：

<h1><a href="https://www.facebook.com/" title="Go to Facebook Home"><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></a></h1>

同样，不完全理想，但他们是Facebook，可以做他们想要的。另一方面，您可能希望在构建网站时更加注意这些最佳实践。

为什么HTML5标题元素需要h标记？

3 个答案:

附加说明