文章页面中的 H1 - 网站标题或文章标题？答案

【问题标题】：H1 in article page - site title or article title?文章页面中的 H1 - 网站标题或文章标题？
【发布时间】：2010-09-21 01:47:10
【问题描述】：

在面向文章的页面（例如博客文章）中，<h1> 元素（1 级标题）通常用于标记：

博客标题（即页面顶部通常较大的网站标题，不是到<title>元素），或
文章标题

什么是最好的选择，为什么？

对于可能想向全世界宣传其网站/博客名称的网站所有者来说，在网站标题周围使用 1 级标题似乎是有意义的。

从您试图向用户传达的内容的角度来看，网站标题的相关性较低 - 文章内容是您试图传达的内容，而所有其他网站内容都是次要的。因此，最好使用<h1> 作为文章标题。

我觉得<h1> 元素应该关注文章标题，而不是网站标题或其他内容。无论如何，这似乎不是一个流行的约定。

例子：

Joel Spolsky 使用 <h1> 作为文章标题，并使用锚点作为网站标题
Jeff Atwood根本不使用<h1>，<h2> 用于文章标题，而锚点用于网站标题
37 Signals' SVN 使用 <h1> 作为网站标题，并使用锚点作为文章标题

这是跨三个站点的三种不同方法，您可能期望在其中认真考虑正确的语义标记。

我认为 Joel 与 Jeff 紧随其后。我对 37Signals 人员的标记选择感到非常惊讶。

对我来说，这似乎是一个非常简单的决定：与文章的消费者最相关的是什么？文章标题。因此，将文章标题包装在 <h1> 元素中。完成。

我错了吗？我还缺少进一步的考虑吗？我对吗？如果是这样，为什么'<h1> 用于文章标题'的方法不更常用？

在哪里使用<h1> 元素的决定是否像我所说的那样不变？还是有一些主观的考虑？

更新：感谢您迄今为止的所有回答。我真的很感激使用<h1> 作为文章标题而不是网站标题如何有利于可用性和可访问性（或者没有，视情况而定）。基于事实而非个人猜测的答案将获得许多奖励积分！

【问题讨论】：

w3.org/TR/2012/WD-html5-20121025/…

标签： html usability accessibility semantics

【解决方案1】：

应该只有一个，而且必须只有一个

h1

;通常这是页面标题。然后它应该遵循 h2，h3 等。

所以你的页面可以看起来像这样（没有所有其他 html 标记）

h1 h2 h2 h3 ..等等

【讨论】：

本例中的问题是：页面标题是网站标题还是文章标题？

【解决方案2】：

在您博客的主页上，我会使用 H1 表示网站标题，使用 H2 表示在首页上发布的各个博客文章的标题。

不过，在输入特定文章时，我会使用 H1 作为文章标题，使用锚点作为网站标题。

这是一个很好的语义设置，当 Google 抓取您的网站时也会受到赞赏。

【讨论】：

【解决方案3】：

有一个W3C Quality Assurance tip关于这个话题：

<h1> 是 HTML 元素文档的一级标题：

如果文档基本上是独立的，例如看的东西和做在日内瓦，顶级标题可能与标题。

如果它是集合，例如关于狗在关于页面的集合宠物，然后是顶级标题应该假设一定数量的语境;写<h1>Dogs</h1> 而标题应该适用于任何背景：狗 - 您的宠物指南。

【讨论】：

谢谢，这个解释很有帮助。这是对上述内容的另一个很好的描述：webmasters.stackexchange.com/questions/4515/…
请注意，这不是 W3C 推荐，它只是来自 QA W3C 小组的非规范性提示。

【解决方案4】：

在 Wikipedia 上，h1-Tag 包含文章名称，并且文档中的标题以 h2 开头。名称 Wikipedia 是 html-header 中标题标签的一部分。我也认为这是要走的路。所以对于博客，我会喜欢你给出的例子中的 Joel Spolsky。

而且我总是从最高级别开始，所以我认为放出 h1 是一个糟糕的选择。

【讨论】：

【解决方案5】：

HTML 页面的<head> 部分有一个名为<title> 的元素。顾名思义，这是网站标题。

HTML 用于将页面构造成机器可解析的形式，而不是用于布局。如果只是关于布局，您只能使用具有不同类/id 的 <div> 和 <span> 块并将 CSS 应用于它们。而不是

<h2>Sub Header</h2>

我可以使用

<div class="header2>Sub Header</div>

并且在某处有一些 CSS 代码可以使 <div> 看起来像 h2（字体大小、粗体等）。不同之处在于计算机无法知道我的<div> 实际上是第一个示例中的二级标题（它怎么知道？我可能将其命名为不同于“header2”），但是在第一种情况下，它知道这是一个二级标题，因为它是一个<h2> 元素，如果它想向用户显示页面标题的结构化列表，它可以这样做

顶级标题
- 子标题
  - 子子标题
- 子标题
- 子标题
顶级标题
- 子标题
  - 子子标题
  - 子子标题
- 子标题
  :

通过搜索 H1/H2/H3/... 元素并按上述方式构建它们。因此，如果计算机试图找出页面的标题，它会去哪里寻找呢？在名为 <title> 的元素中还是在名为 <h1> 的元素中？想一想，你就有答案了。

当然，您可能会说“但标题在页面上不可见”。好吧，它通常在浏览器窗口的某处可见（窗口标题或至少选项卡标题） - 但是，您可能希望它在页面上也可见 - 我可以理解。但是，这样做有什么意义呢？谁说你不能重复？但我想知道您是否应该为此使用 h1 元素。

<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

使用 CSS 以您喜欢的方式设置 #title 的样式。如果你愿意，让它变得超级大、超级大胆，并有一个引人注目的颜色，没有什么可以反对它。自动页面解析器通常会在某种程度上忽略 div 和 span，因为它什么也没告诉它们（这些元素用于为读者布局页面，但它们对页面结构只字未提。LAYOUT is not STRUCTURE，您只能将样式应用于某些结构元素以生成布局，但不应与另一个混淆）。计算机仍然会知道页面的标题是什么，这要归功于 title 元素。

【讨论】：

感谢您的全面回答。然而，我并不是在寻找关于如何应用结构与风格以及其他此类问题的解释。我对在网站标题周围使用 <h1> 而不是文章标题（或相反）之间的语义差异更感兴趣。
乔恩，我想 Mecki 也回答了这个问题。 “正确”但较少使用的约定是不要在网站标题周围使用 H1。

【解决方案6】：

作为屏幕阅读器用户，标题级别并不重要，只要它保持一致即可。不同的博客使用不同的约定，因此没有标准的方法可以使其更易于访问。确保标题与内容级别匹配比使用什么级别的标题更重要。例如，如果显示一系列带有 cmets 的博客文章，所有博客文章都可以有 2 级标题，而在 cmets 的开头，您可以有 3 级标题。有关易于导航标题的示例，请查找具有多个部分的任何 Wikipedia 文章和小节。我可以通过使用屏幕阅读器按标题导航功能轻松跳过主要部分以跳转到任何 2 级标题，如果我想移动到给定部分的子部分，我将导航到下一个标题。

【讨论】：

【解决方案7】：

对于一个典型的网站，例如博客，h1 应包含站点标题。是的，在网站的每个页面上。

为什么？在一个网站中，它的所有网页都有不同的部分。我们以导航为例：

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

这个#site-navigation 在网站的每个页面上都重复出现。它代表站点导航，而不是页面导航。区别很重要！ {页面导航可以是目录（如维基百科文章）或长篇文章的分页。}

如果您将文章标题用作h1，则站点导航将在此标题范围内。

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

所以这个标记传达：导航（→由h2开始）是文章的一部分（→由h1开始）。但这不是真的，这个导航不是文章的导航。链接实际上是整个站点的一部分，站点由站点标题表示。

当文章也包含副标题时，问题变得更加清晰：

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

如您所见，没有办法将文章子标题与导航区分开来。这篇文章似乎有三个小标题：“我为什么要写博客”、“你为什么要阅读我的博客”和“导航”。

因此，如果我们改为使用 h1 作为网站标题，h2 作为文章标题，则导航也可以在网站标题范围内，也可以使用 h2：

<body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

现在这个标记传达了：有一个名为“John's blog”的站点（→ 由h1 开始），它包含一篇文章（→ 由第一个h2 开始）和一个站点导航（→ 由第二个h2)。文章的副标题现在当然是h3。

使用h1 作为文章标题的另一个问题是，通常在第一个标题之前有内容，例如站点标题，包括站点标题和其他内容。对于通过标题导航的用户，第一个内容将是“不可见的”。因此，最好为每个单独的块指定一个标题。

HTML5 使用 sectioning/outlining algorithm 将其形式化。它解决了您在使用 HTML 4.01 时可能遇到的许多大纲问题，因为内容顺序现在（大部分）是免费的，如果您不想这样做，您不必“发明”实际标题，这要感谢 section/ article/nav/aside。但在 HTML5 中，站点标题也应该是 h1，它是 body 的子代，但不是任何分段元素/根的子代。所有其他部分都在本网站标题的范围内。

【讨论】：

【解决方案8】：

文章页面中的 H1 - 网站标题或文章标题？

两者兼而有之。本文内容丰富：The Truth About Multiple H1 Tags in the HTML5 Era。

【讨论】：