如何在HTML5中正确使用h1
以下哪一项是构build页面的正确方法：
1） h1只在header
<header> <h1>Site title</h1> <nav>...</nav> </header> <section> <h2>Page title</h2> </section>
如果我仅在header内使用h1作为网站的标题，则每个页面将具有相同的h1标记内容。 这似乎没有很多信息。
2） header和section h1 ，用于站点和页面标题
<header> <h1>Site title</h1> <nav>...</nav> </header> <section> <h1>Page title</h1> </section>
我也看到了在header和section标签中不止一次使用h1例子。 然而，在同一页面上有两个标题是不是错了？ 此示例显示多个标题和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似乎推荐在主要section元素中使用h1 ，这是否意味着我不应该在header元素中使用它？
部分可能包含任何级别的标题，但是强烈build议作者只使用h1元素，或者使用适合级别的元素来嵌套级别。
正如我在我的评论中说的，你在W3C中引用，h1是标题而不是标题。 每个剖面元素都可以有自己的标题元素。 你不能认为h1只是页面的标题，而是作为页面特定部分的标题。 就像报纸的头版一样，每篇文章都可以有自己的标题（或标题）。
这里有一篇很好的文章。
我会build议在整个使用h1 。 通过h6忘掉h2 。
回到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元素，可以显式定义这些部分，而不必依靠浏览器创build的隐式部分来读取不同的标题级别。 配备了HTML5的浏览器知道， section元素中的所有内容在doc轮廓中被“降级”了一级。 因此，例如，一个section > h1的section > h1在语义上就像是一个h2 ，一个section > section > h1就像是一个h3等。
令人困惑的是浏览器仍然创build基于h2 – h6标题级别的隐式段落，而h2 – h6元素不会改变它们的样式。 这意味着一个h2 ，无论嵌套多less节，仍然会像h2 （至less在Webkit中）。 如果你的h2应该是一个4级的标题，这将是混乱的。
混合h2 – h6与section导致非常意想不到的结果。 只要坚持使用h1 ，并使用section来创build明确的部分。
<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>元素 。 该元素仅包含特定于页面的信息，不应包含站点范围内重复的内容，如导航链接，网站页眉/页脚等。 <body>可能只有一个 <main>元素。 所以你的解决scheme可能像这样简单：
<header> <h1>Site title</h1> <nav>...</nav> </header> <main> <h1>Page title</h1> <p>page content</p> </main>
但是，不要忘记可访问性问题。 根据MDN的说法，目前在graphics浏览器或辅助技术用户代理中没有已知的轮廓algorithm实现。 这意味着屏幕阅读器可能无法弄清楚只有<h1>的部分的相对重要性。 它可能需要更多的标题级别，如<h2>和<h3> 。
