html-文章页面中的H1-网站标题还是文章标题?

在面向文章的页面(例如博客文章)中,<h1>元素(1级标题)通常用于标记:

  • 博客标题(即页面顶部通常是较大的网站标题,而不是<h1>元素),或者
  • 文章标题

最佳选择是什么,为什么?

对于网站所有者来说,他们可能想向世界大喊他们的网站/博客的名称,在网站标题周围使用第1级标题似乎很有意义。

从您试图与用户进行交流的角度来看,网站标题的相关性较低-文章内容是您尝试交流的内容,所有其他网站内容都是次要的。 因此,使用<h1>作为文章标题似乎最好。

我觉得<h1>元素应重点放在文章标题上,而不是网站标题或其他内容上。 无论如何,这似乎不是流行的惯例。

例子:

  • Joel Spolsky使用<h1>作为文章标题,并使用锚作为网站标题
  • Jeff Atwood完全不使用<h1>,文章标题使用<h1>,网站标题使用锚点
  • 37 Signals的SVN使用<h1>作为网站标题,并使用锚作为文章标题。

这是跨三个站点的三种不同方法,您可能会强烈考虑正确的语义标记。

我认为乔尔(Joel)与杰夫(Jeff)紧随其后。 我对37Signals的标记选择感到非常惊讶。

对我来说,这似乎是一个简单的决定:与商品消费者最相关的是什么? 文章标题。 因此,将文章标题包装在<h1>元素中。 做完了

我错了吗? 我还需要进一步考虑吗? 我对吗? 如果是这样,为什么“ <h1>文章标题”方法不更常用?

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

更新:感谢到目前为止的所有答案。 对于将2608803365878878498304用作文章标题而不是网站标题如何提高可用性和可访问性(视情况而定,是否可行),我真的很感激。 基于事实的答案,而不只是个人的假设,将获得许多奖励积分!

Jon Cram asked 2019-11-11T01:10:07Z
8个解决方案
32 votes

有关此主题的W3C质量保证提示:

<h1>Dogs</h1>是用于   文档的第一级标题:

  • 如果文件基本上是   独立的,例如看的东西   和Do in Geneva,顶级   标题可能与   标题。

  • 如果它是一个   集合,例如关于   狗在关于   宠物,然后是顶层标题   应该承担一定量的   上下文 只需写<h1>Dogs</h1>   而标题应该在任何   环境:狗-您的宠物指南。

xsl answered 2019-11-11T01:10:40Z
12 votes

作为屏幕阅读器用户,标题级别并不重要,只要它是一致的即可。 不同的博客使用不同的约定,因此没有标准的方法可以使其更易于访问。 确保标题与内容级别匹配比使用标题级别更重要。 例如,如果显示一系列带有评论的博客文章,那么所有博客文章的标题级别都可以为2,而在评论开始时,标题级别可以为3。有关易于浏览的标题的示例,请找到任何包含多个部分的Wikipedia文章。 小节。 我可以使用屏幕阅读器通过标题导航来跳至任何第2级标题,从而轻松地跳过主要部分,如果我想移至给定部分的子部分,我将导航至下一个标题。

Jared answered 2019-11-11T01:11:06Z
11 votes

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

但是,当输入特定文章时,我将H1用作文章标题,将锚点用作网站标题。

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

JacobE answered 2019-11-11T01:11:43Z
3 votes

在Wikipedia上,h1-Tag包含文章名称和文档中的标题以h2开头。 维基百科的名称是html标头中title-tag的一部分。 我也认为这是要走的路。 因此,对于博客,我会在您提供的示例中喜欢Joel Spolsky。

而且我总是从最高级别开始,所以让h1成为我的坏选择。

Mnementh answered 2019-11-11T01:12:14Z
2 votes

HTML页面的#title部分具有名为<h1>的元素。顾名思义,这是网站标题。

HTML用于将页面结构化为机器可解析的形式,而不是用于布局。 如果仅是布局,则只能使用具有不同类/ id的#title<h1>块并将CSS应用于它们。 代替

<h2>Sub Header</h2>

我可以用

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

并且某处有一些CSS代码,可使#title看起来像h2(字体大小,粗体等)。 区别在于,计算机无法知道我的<h1>实际上是第一个示例中的第二级头(它应该如何知道?我可能将其命名为不同于“ 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,您只能应用 某些结构元素的样式以生成布局,但不应与另一种混淆)。 仍然,计算机会知道页面的标题是什么,它要感谢title元素。

Mecki answered 2019-11-11T01:13:52Z
1 votes

对于典型的网站,例如 一个博客中,section应该包含网站标题。 是的,在网站的每个页面上。

为什么? 在网站中,其所有网页都共享各个部分。 让我们以导航为例:

<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>

section在网站的每个页面上都重复出现。 它代表站点导航,而不是页面导航。 区别很重要! {页面导航可以是目录(如Wikipedia文章中的表),也可以是长篇文章的分页。}

如果您将文章标题用作section,则网站导航将在此标题的范围内。

<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>

因此,该标记表示:导航(→由2608809232619619275264开始)是文章的一部分(→由article开始)。 但这不是事实,此导航不是文章的导航。 链接实际上是整个网站的一部分,该网站由网站标题表示。

当文章也包含副标题时,问题将变得更加清楚:

<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>

如您所见,没有办法将文章子标题与导航区分开。 该文章似乎包含三个子标题:“为什么我要写博客”,“为什么要阅读我的博客”和“导航”。

因此,如果我们改为使用section作为网站标题,并使用article作为文章标题,则导航也可以在网站标题的范围内,也可以使用nav

<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>

现在,该标记传达了:有一个名为“约翰的博客”的站点(→由2608809232619275275开始),并且包含一篇文章(→由第article开始)和站点导航(→由第二个nav开始)。 当然,该文章的小标题现在是h3


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

HTML5使用分段/概述算法对此进行了形式化。 它解决了HTML 4.01可能存在的许多概述问题,因为内容订单现在(大部分)可以免费使用,而且如果您不想的话,也不必“发明”实际的标题,这要感谢section/article / nav/aside。 而且在HTML5中,网站标题也应该是h1,它是body的子级,但不能是任何sectioning元素/根的子级。 所有其他部分均在此网站标题的范围内。

unor answered 2019-11-11T01:15:26Z
1 votes

文章页面中的H1-网站标题还是文章标题?

都。 本文内容丰富:HTML5时代的多个H1标签的真相。

Mori answered 2019-11-11T01:15:59Z
-4 votes

只能有一个,而且只能有一个

h1
; 通常这是页面标题。然后应遵循h2,h3等。

这样您的页面就可以看起来像这样(没有其他所有html标签)

h1
  h2
  h2
    h3
..etc
eddy147 answered 2019-11-11T01:16:37Z
translate from https://stackoverflow.com:/questions/268475/h1-in-article-page-site-title-or-article-title