Question

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

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

什么是最佳选择？为什么？

对于网站所有者，他们可能想要向全世界喊出他们网站/博客的名称，使用网站标题周围的1级标题似乎是有意义的。

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

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

示例：

Joel Spolsky使用<h1>作为文章标题，并使用网站标题的锚点
Jeff Atwood使用 no <h1> ，<h2>用于文章标题和网站标题的锚点
37 Signals' SVN使用<h1>作为网站标题，使用文章标题的锚点

这是三个不同的方法，您可能会期望对正确的语义标记进行强烈考虑。

我认为乔尔和杰夫紧随其后是正确的。我对37Signals人的加成选择感到非常惊讶。

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

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

我决定使用<h1>元素的位置是不变的吗？或者是否还有一些主观考虑因素？

更新：感谢目前为止的所有答案。我真的很感激使用<h1>对文章标题而不是网站标题如何使用可用性和可访问性（或者不是，视情况可能或不是）。基于事实而不仅仅是个人假设的答案将获得许多奖励积分！

Answer 1

关于此主题有一个W3C Quality Assurance tip：

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



如果文件基本上是   单机，例如要看的东西   在日内瓦，顶级   标题可能与。相同   标题。



如果它是a的一部分   集合，例如一节   狗关于页面的集合   宠物，然后是顶级标题   应该承担一定的数额   上下文;只写<h1>Dogs</h1>   虽然标题应该适用于任何标题   背景：狗 - 你的宠物指南。

Answer 2

作为屏幕阅读器用户，只要标题级别一致，标题级别就无关紧要。不同的博客使用不同的约定，因此没有标准的方法可以使其更易于访问。确保标题与内容级别匹配比使用什么级别的标题更重要。例如，如果显示一系列带有评论的博客文章，则所有博客帖子都可以具有标题级别2，并且在评论开始时您可以具有标题级别3.对于易于导航标题的示例，查找具有多个部分的任何维基百科文章和小节。我可以通过使用我的屏幕阅读器轻松跳过主要部分，通过标题功能导航到任何2级标题，如果我想移动到给定部分的子部分，我将导航到下一个标题。

Answer 3

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

但是，在输入特定文章时，我会使用H1作为文章标题和网站标题的锚点。

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

Answer 4

在维基百科上，h1-Tag包含文件名和标题，以h2开头。维基百科的名称是html-header中title-tag的一部分。我也认为这是要走的路。所以对于博客，我会在你给出的例子中像Joel Spolsky那样。

而且我总是从最高级别开始，所以在我看来放弃h1是一个糟糕的选择。

Answer 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不是STRUCTURE ，您只能将样式应用于某些结构元素以生成布局，但不应将其与另一个相混淆。仍然是计算机将知道页面的标题是什么，它由于标题元素而知道它。

Answer 6

对于典型的网站，例如在博客中，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：< / p>

<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的博客”的网站（→由h1开始），它包含一篇文章（→由第一个h2开始）和网站导航（ →由第二个h2开始。当然，这篇文章的副标题现在是h3。

使用h1作为文章标题的另一个问题是，在第一个标题之前通常会有内容，例如：网站标题包括网站标题和其他内容。对于通过标题导航的用户，该第一内容将是“不可见的”。因此，为每个单独的块提供自己的标题是一种好习惯。

HTML5使用sectioning/outlining algorithm将其形式化。它解决了HTML 4.01可能遇到的许多概述问题，因为内容顺序现在（大部分）是免费的，如果你不想，你不必“发明”实际标题，这要归功于{{1} } / section / article / nav。但是在HTML5中，站点标题应该是aside，它是h1的子项，但不是任何分段元素/ root的子项。所有其他部分都在本网站标题的范围内。

Answer 7

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

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

Answer 8

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

h1

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

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

h1
  h2
  h2
    h3
..etc

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

8 个答案: