h1 and semantic HTML5



最近几天我读了很多关于语义HTML的文章,我很困惑。

标题标签应该包含特定页面的内容和网站名称。h1和标题有什么区别?我读到h1也应该包含页面的内容。我还读到,在HTML5中,h1标签可以在一页上使用不止一次,并且用于部分中的标题(这不是标题标签的作用吗?)

如果我的页面上有一个徽标,是一张带有我的网站名称的图片,我应该使用什么标签?我一直以为h1是为了这个。

h1和标题有什么区别?

HTML5(CR)规范包含titleh1之间的区别(包含站点标题):

即使断章取义,作者也应该使用标识文档的标题,例如在用户的历史记录或书签中,或在搜索结果中。文件的标题通常与第一个标题不同,因为断章取义时,第一个标题不必单独出现。


我还读到,在HTML5中,h1标签可以在一个页面上多次使用,并且在[…]部分中用于标题

是的,在HTML5中,您可以在任何地方使用h1,并且您永远不需要使用h2-h6,前提是(且仅当!)您正确使用了分区内容元素,这些元素是:sectionarticleasidenav。为什么?因为:

分区内容元素中标题内容的第一个元素表示该分区的标题。

因此,它是的第一个标题,无论它处于哪个级别。


[…](这不是标题标签的作用吗?)

不,header元素用于小节的"介绍性内容",它可能(不一定)包括小节的标题,但它可能包含更多内容。


如果我的页面上有一个徽标,是一张带有我的网站名称的图片,我应该使用什么标签?我一直以为h1是为了这个。

是的,它应该是h1,它是body的子元素,并且不属于其他分段内容元素。这表示站点标题。这个页面上的所有其他内容(导航、主要内容等)都在这个网站标题的范围内。

示例:

<body>
  <h1><img src="…" alt="ACME Inc." /></h1> <!-- ← the site heading -->
  <nav></nav> <!-- the site’s navigation -->
  <article> <!-- the main content of this page -->
    <h1>My favorite book</h1>
  </article>
</body>

该文件将创建以下大纲:

1. ACME Inc.
  1.1 (implicit; navigation)
  1.2 My favorite book

您可以将标题视为一本书的标题,h1是章节标题,但这并不总是适用于所有网站。如果你的网站是一本书,那么"我的书"会成为一个很好的标题标签,每页的h1都是"第十章"。这并不总是有效的。谷歌表示,如果你有CompanyX,那么随后的每个页面标题都应该反映页面上的内容,比如"我们的产品",而不是"CompanyX-我们的产品。"。但这是为了在他们的搜索结果上进行布局。

正如其他人所说,使用HTML5,页面上可以有许多部分,每个部分都有自己的h1标题。但是,您的页面可能只有一个必要的h1标题。因此,考虑一个合适的标题/h1组合需要一些思考。

h1用于强调小节标题。如果一个部分有子部分,你会使用h2标签,如果这些有子部分你会使用h3标签,以此类推

Havin说,在哪里可以或不可以使用h1标签和h2标签等没有限制。使用它,因为它听起来对你来说很方便

<title>标记用于在浏览器选项卡标题或窗口标题栏

中显示页面标题

只将title用于您想要在浏览器选项卡中显示的内容。来自MDN:

HTML标题元素()定义文档的标题,通常显示在浏览器的标题栏或页面的选项卡上。它只能包含文本,并且不解释任何包含的标记。

此外,title只能在head元素中使用,因此不要将其用于您的徽标。如果您觉得徽标文本是页面上最重要的标题,请使用h1

title标记位于html文档的head部分。它显示为选项卡的标题和浏览器的窗口标题栏。。。对SEO非常重要。

h1是您网站的第一个也是最重要的标题。为了获得最佳SEO结果,每页只能使用一次。对于SEO来说也很重要,但不如<title>那么重要。

<html>
    <head>
        <title> Your Title here -</title>
    </head>
    <body>
        <h1>VIH - very important heading</h1>
    </body>
<html>

最新更新