如何在HTML5中正确使用H1

Question 1

以下哪种是构造页面的正确方法：

1）h1仅在header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

如果我h1仅将内部header用作网站的标题，则每个页面的h1标签内容都相同。这似乎并不十分有用。

2）h1在header和中section，用于网站和页面标题

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

我还看到了h1在header和section标签中多次使用的示例。但是，在同一页面上具有两个标题不是错吗？此示例显示了多个标头和h1标签http://orderedlist.com/resources/html-css/structural-tags-in-html5/

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

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

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

各节可以包含任何级别的标题，但是强烈建议作者仅使用h1元素，或者对该节的嵌套级别使用适当级别的元素。

Question 2

正如我在评论中指出的，并且您在W3C中引用的那样，h1是标题而不是标题。每个切片元素都可以具有自己的标题元素。您不能仅将h1视为页面的标题，而应将其视为页面特定部分的标题。就像报纸的首页一样，每篇文章都可以有自己的标题（或标题）。

这是一篇很好的文章。

Question 3

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

回到HTML4，使用6个标题级别隐式定义了各个部分。例如，

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

现在有了这个section元素，您可以显式定义这些部分，而不必依靠浏览器读取不同标题级别创建的隐式部分。配备HTML5的浏览器知道，section元素内的所有内容都会在文档大纲中被“降级”。因此，例如asection > h1在语义上被视为an h2，asection > section > h1被视为an h3，等等。

令人困惑的是，浏览器仍然基于h2–h6标题级别创建隐式部分，但是h2–h6元素不会改变其样式。这意味着h2无论嵌套多少节，an都会看起来仍然像一个h2（至少在Webkit中）。如果您的h2标题是例如4级标题，这将令人困惑。

混合h2-h6与section导致非常意外的结果。只需坚持h1，并用于section创建显式部分。

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <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>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <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>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

此外，你可以使用的<main>元素。此元素仅包含特定于该页面的信息，并且不应包含在整个网站范围内重复的内容，例如导航链接，网站标头/页脚等。可能仅 <main>存在一个元素<body>。因此，您的解决方案可能像这样简单：

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>

Question 4

但是，不要忘记可访问性问题。根据MDN的说法，“目前在图形浏览器或辅助技术用户代理中没有大纲算法的已知实现”。这意味着屏幕阅读器可能无法仅使用来弄清各部分的相对重要性<h1>。它可能需要更多的标题级别，例如<h2>和<h3>。