12

如何在 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. Facebook

    1.1 有人分享了 Blah Blah 的照片

    1.2 其他帖子

    1.3 其他帖子

可以吗？

4

2 回答 2

9

尤其是因为轮廓，使用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>…&lt;/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)

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

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

如果您不使用 ah1作为网站标题/徽标，并且没有为您的主要内容使用分段元素……</p> 

<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>…&lt;/p>

</body>

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

1 untitled (→ body)
  1.1 untitled (→ body>nav)
2 My first blog post (→ body>h1)
于 2013-02-17T10:39:12.367 回答
7

我会把它放在一个header元素中：

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

像这样：

<header>
  <a href="/"><img src="..." alt="Foo Company Home"></a>
</header>
于 2013-02-16T17:25:24.097 回答