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

【问题标题】：Using <h1> on website name in HTML5在 HTML5 中的网站名称上使用 <h1>
【发布时间】：2013-02-01 11:52:56
【问题描述】：

如何在 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 其他帖子

这样好吗？

【问题讨论】：

查看youtube.com/watch?v=GIn5qJKU8VM
我同意这取决于您如何使用切片。每个页面上完全相同的 h1 可能是坏的。但是，切片与 HTML5 一起工作的方式可能是可行的。只需在 HTML5 大纲中检查您的大纲即可。
我们办公室的 SEO 专家说每个页面上应该只有一个 h1。另外，最好突出显示描述当前页面内容的重要文本而不是图像，这将没有任何价值。
这篇值得一读csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1
How to properly use h1 in HTML5的可能重复

标签： html seo

【解决方案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)

【讨论】：

唯一的页面标题不应该是标题而不是站点名称吗？否则每个页面标题都是网站的名称！
@jdln：你是指主要内容的标题（比如“我的第一篇博文”）？在这种情况下，我认为大纲是错误的，因为站点导航（和其他站点范围的东西）通常不应该在主要内容标题的范围内。
我的意思是像一个新闻网站。您将有 2 个标题，站点名称和文章名称。例如bbc.co.uk/news/uk-34112486 页面标题是“伊丽莎白二世女王：伊丽莎白和维多利亚的人数”，但您可能也应该在某个地方看到“BBC 新闻”。视觉用户可以立即看到它的 BBC 新闻网站，但视觉受损用户和机器人不会知道这一点。
@jdln：是的，在我的回答中，我认为“BBC News”应该是文件的标题（即h1），而“Queen El...”应该在它的范围内（即h2），在站点范围导航旁边（也是h2）等。通过使用分段内容元素（nav，aside，...），header/footer，和@ 987654342@，用户代理原则上可以推断出文档中的主要内容标题。
我知道这是一篇旧帖子，但我想我会提到 StackOverflow 本身不同意，它的标题和徽标使用标题，问题使用 H1。

【解决方案2】：

我会把它放在 header 元素中：

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

像这样：

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

【讨论】：

基于 w3 的那部分，我会说你应该在你的标志周围使用 H1。