关于html：如何在HTML5中正确使用h1


How to properly use h1 in HTML5

以下哪一项是构建页面的正确方法：

1)h1仅在header中

1
2
3
4
5
6
7
<header>
    Site title
    <nav>...</nav>
</header>
<section>
    Page title
</section>

如果我只在header中使用h1作为站点的标题，那么每个页面的h1标记都将具有相同的内容。这似乎不是很有用。

2)header和section中的h1用于站点和页面标题。

1
2
3
4
5
6
7
<header>
    Site title
    <nav>...</nav>
</header>
<section>
    Page title
</section>

在header和section标记中，我也见过多次使用h1的例子。但是，在同一页上有两个标题是不是不对的？此示例显示多个header和h1标记http://orderedlist.com/resources/html-css/structure-tags-in-html5/

3)h1仅在section中，强调页面标题

1
2
3
4
5
6
7
8
9
<header>
    <p>
Site title
</p>
    <nav>...</nav>
</header>
<section>
    Page title
</section>

最后，w3似乎建议在主section元素中使用h1，这是否意味着我不应该在header元素中使用它？

Sections may contain headings of any rank, but authors are strongly
encouraged to either use only h1 elements, or to use elements of the
appropriate rank for the section's nesting level.

相关讨论

正如我在我的评论中所说，您在W3C中引用的那样，h1是一个标题，而不是标题。每个分段元素可以有自己的标题元素。你不能认为h1只是一个页面的标题，而是页面特定部分的标题。就像报纸的头版一样，每一篇文章都有自己的标题。

这是一篇很好的文章。

相关讨论

我建议在整个过程中使用h1。通过h6忘记h2。

回到HTML4中，6个标题级别被用于隐式定义节。例如，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
This is a top-level heading
<p>
some content here
</p>
This is the heading of a subsection
<p>
content in the subsection
</p>
Another subsection begins here
<p>
content
</p>
another top-level heading

现在，使用section元素，您可以显式定义节，而不必依赖浏览器读取不同标题级别创建的隐式节。配备HTML5的浏览器知道，section元素中的所有内容都会被文档大纲中的一个级别"降级"。例如，在语义上，section > h1被视为h2，section > section > h1被视为h3等。

令人困惑的是，浏览器仍然基于h2&ndash；h6标题级别创建隐式部分，但是h2&ndash；h6元素不会改变它们的样式。这意味着，无论h2嵌套了多少节，它仍然会像h2一样出现(至少在WebKit中)。如果您的h2被认为是，比如说，一个级别4的标题，那么这会令人困惑。

将h2与section混合会产生非常意想不到的结果。只需坚持使用h1，并使用section创建显式节。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
<!-- optional --><header>
    This is a top-level heading
    <p>
you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.
</p>
<!-- optional --></header>
<section>
    even though this is an h1, the browser"treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).
    <p>
content in the subsection
</p>
</section>
<section>
    Another subsection begins here, also treated like an h2
    <p>
content
</p>
    This is misleading. it is semantically treated like an h3.
    <p>
that is because after an h1, an h2 is demoted one level. the h1 above is
        already a"level 2" heading, so this h2 becomes a"level 3" heading.
</p>
    <section>
        just do this instead.
        <p>
it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)
</p>
    </section>
</section>
another top-level heading

此外，您可以使用

元素。此元素只包含特定于页面的信息，不应包括重复的站点范围的内容，例如导航链接、站点页眉/页脚等。在中可能只有一个
元素。因此，您的解决方案可能简单如下：

1
2
3
4
5
6
7
8
9
10
<header>
    Site title
    <nav>...</nav>
</header>
<main>
    Page title
    <p>
page content
</p>
</main>
相关讨论

但是，不要忘记可访问性问题。根据MDN的说法，"目前图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现"，这意味着屏幕阅读器可能无法找出仅使用的部分的相对重要性。它可能需要更多的航向水平，如和。