Question

如何在HTML5中正确标记网站的标题？通常我用以下标记网站的名称：

<h1>
    <a href=#>Website Name</a>
</h1>

最近我遇到了HTML5文档大纲算法。我还读到，似乎在h1标签中标记您的网站名称没有意义，因为除了网站名称之外，每个页面可能都有不同的主标题（h1）。

如果在Facebook上说，如果Facebook的徽标/标题的标记包含在<h1>标记中，该怎么办？然后，如果每个帖子都包含在<article>标签中。例如：

<article class="post">
    <h5 class="post-header">
         <a href="#">Someone has shared Blah Blah's photo</a>
    </h5>
     <div class="post-body">...</div>
</article>

我认为文件大纲是

实

1.1有人分享了Blah Blah的照片

1.2其他帖子

1.3其他职位

可以吗？

Answer 1

特别是因为大纲的使用h1是有意义的。

如果您的网页是网站的一部分，则每个网页都应有一个网站标题h1，其中包含网站标题，网站徽标或两者。重要的是，此网站标题不是切片元素的子项（section / article / aside / nav）。

因此，页面的顶级标题始终是站点标题。并且网站导航，页面的主要内容，带有辅助内容的侧边栏等都将成为该顶级标题的“孩子”。

博客帖子页面的简单结构可能是：

<body>
  <h1><img src="logo.png" alt="John's blog"></h1>

  <nav><!-- the site-wide navigation --></nav> 

  <article>
    <h1>My first blog post</h1>
    <p>…</p>
    <footer><!-- this footer applies to the article only--></footer>
  </article>

  <footer><!-- this footer applies to the whole page (→ the site)--></footer>

</body>

这将创建如下的大纲：

1 John's blog (→ body>h1)
  1.1 untitled (→ body>nav)
  1.2 My first blog post (→ body>article>h1)

如果您不在h1中使用网站标题/徽标，该页面将有一个无标题的顶级大纲条目：

1 untitled (→ body)
  1.1 untitled (→ body>nav)
  1.2 My first blog post (→ body>article>h1)

如果您不想使用h1作为网站标题/徽标而没有针对您的主要内容的切片元素......

<body>
  <img src="logo.png" alt="John's blog"> <!-- omitted h1 -->

  <nav><!-- the site-wide navigation --></nav> 

  <!-- omitted article -->
  <h1>My first blog post</h1>
  <p>…</p>

</body>

...你会得到一个包含两个顶级条目的大纲：

1 untitled (→ body)
  1.1 untitled (→ body>nav)
2 My first blog post (→ body>h1)

Answer 2

我将它放在header元素中：

标题元素通常包含节的标题（h1-h6元素或hgroup元素），但这不是必需的。该 header元素也可以用来包装一个section的目录，搜索表单或任何相关徽标。

像这样：

<header>
  <a href="/"><img src="..." alt="Foo Company Home"></a>
</header>

在HTML5中的网站名称上使用<h1> </h1>

2 个答案: