在一篇文章为导向的网页(如博客), <h1> 元(1级标题)是通常用来标记:

  • 博客的标题(即经常的大型网站的标题在顶部的网页, 来的 <title> 元),或
  • 文章的标题

什么是最好的选择,和为什么?

该网站的所有者,谁可能想喊出来,世界上的名称他们的网站/博客中,使用一个等级1的标题围绕该网站的标题可能似乎是有意义的。

从该角度来你正在尝试沟通的用户,该网站的标题是小相关性的文章的内容是什么你想沟通和其他所有网站内容是次要的。因此,使用 <h1> 为本条的标题似乎是最好的。

我觉得的 <h1> 元素的重点应该在该条的标题,而不是网站的标题或其他内容。这似乎不是一个受欢迎的《公约》通过任何手段。

实例:

  • 乔尔Spolsky 使用 <h1> 为本条的标题,和一个锚的网站的标题
  • 杰夫*阿特伍德 使用 没有 <h1> 在所有, <h2> 文章的标题和一个锚的网站的标题
  • 37信号SVN 使用 <h1> 对该网站的标题和一个锚的文章标题

这是三个不同的方法在三个网站,你可能期待一个强的审议进行正确的语义标记。

我认为乔尔有它的权利与杰夫关闭第二个。我很惊讶标记的选择通过37Signals人。

对我来说似乎相当简单的决定:什么样的关系最大的消费者的文章?文章的标题。因此裹的文章标题中的一个 <h1> 元素。完成。

我错了吗?是否有进一步的考虑我的失踪?我说的对吗?如果是这样,为什么'<h1> 文章的标题'的方法不是更多的常用的?

是的决定在哪里使用 <h1> 元素作为一成不变的,因为我把它?还是有一些主观因素可以做的吗?

更新:谢谢你所有的答案为止。我真的很欣赏某些角度上如何使用 <h1> 为本条的标题,而不是网站的标题好处可用性和无障碍环境(或不作为的情况下可能或不可能).答案基于事实而不仅仅是个人的假设会得到的许多积分!

有帮助吗?

解决方案

还有一个 W3C的质量保证小 关于这个主题:

<h1> 是HTML素 第一次级标题的文件:

  • 如果该文件基本上是 独立的,例如要看的东西 在日内瓦的顶级 标题可能是一样的 标题。

  • 如果这是一部分 收集,例如一部分 狗在一个页面集合约 宠物,然后顶级的标题 应该假定一定数量的 上下文;只是写信 <h1>Dogs</h1> 虽然标题应该在任何 上下文:狗-你的向导的宠物。

其他提示

作为一个屏幕阅读器用户的标题一级并不重要只要它是一致的。不同的博客使用不同的公约,所以没有标准的方式,使它更容易获得。确保该标题的内容的水平,更重要什么水平的标题是使用。例如,如果显示一系列的博客的意见所有的博客可能有的标题2级和在开始的评论你可以走3级。对于一个实例很容易浏览的标题找到任何文章的多部分和小节。我可以轻松跳过围绕主要部分通过使用我的屏幕阅读器的导航的项功能跳到任何级别2的标题,并且如果我想要移动到小节的一定部分,我将引导到下一个标题。

在你的博客上的主页,我会用H1表示该网站的标题和H2为标题单独的博客上发布前页。

当进入一个特定的文章,不过,我会用H1为该条的标题和主持该网站的标题。

这是一个很好的和义设置这还将意识到通过谷歌的时候它搜你的网站。

维基百科上h1-标签包含的文章的名称和标题的文件开始与h2。名字是维基百科的一部分的标题-标签的html头。我还以为这就是要走的路。因此,对于博客,我就不喜欢乔尔Spolsky的例子,你已经给出。

并且我总是会开始以最高级别,所以出租h1是在我看来,一个糟糕的选择。

<head> 一部分HTML网页有一个元素名 <title>.顾名思义,这是对该网站的标题。

HTML是用来结构的一页放入机器分析,能够形式,不是为布局.如果这只是关于正在布局,你只能使用 <div><span> 块不同类别/ids和应用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和跨度从某种程度上说,作为它告诉他们没什么(这些因素用来布置的页面阅读器,但是他们说没什么关的结构页。 布局是不结构, 你只能应用的风格,某些结构性因素产生的布局,但不应混淆的其他一)。仍然是一个计算机就会知道什么页的标题,它知道它的感谢标题件。

对于一个典型的网站,例如一个博客的 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>

现在,这种标记表达:有一个网站,名称为"约翰的博客"(→开始的 h1)和它所包含的一篇文章(→开始通过第一 h2)和网站导航(→开始通过第二 h2).小标题的文章会 h3 现在,当然。


另一个问题,通过使用 h1 为本条的标题,然后通常有内容 之前 第一个标题,例如该网站的标题包括网站的标题和其他的东西。对于用户,浏览过的标题,这一内容将是"隐形"。所以这是很好的做法,给每一单独方框一个自己的标题。

HTML5正式确定这个的 切片/概述的算法.它解决了许多概述的问题,你可能会有与HTML4.01,因为内容的顺序可以(主要)免费的,现在,你没有"发明"实际的标题如果你不要,谢谢 section/article/nav/aside.而且在HTML5该网站的标题应该是 h1 这是一个孩子的 body 但不是一个孩子的任何分元/根。所有其他部分是在范围上的这个网站的标题。

H1在文页面的网站的标题或文章的标题?

两者。这篇文章提供信息: 事实真相有关的多个H1标签在5时代.

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

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

所以,你的网页可以是这样的(如果没有所有其他html tags)

h1
  h2
  h2
    h3
..etc
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top