如何在HTML5中正确使用h1
以下哪一项是构建页面结构的正确方法：
仅在h1 header中使用1)
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>如果我在header中专门使用h1作为站点的标题，那么每个页面的h1标记都有相同的内容。这似乎不是很有意义。
2)针对站点和页面标题，在h1 header section**，和section**，中使用**
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>我还见过多次在header和section标记中使用h1的例子。然而，同一个页面有两个标题不是错误的吗？此示例显示了多个header和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元素中使用它？
节可以包含任何级别的标题，但强烈建议作者只使用h1元素，或者使用适当级别的元素作为节的嵌套级别。
回答 3
Stack Overflow用户
发布于 2011-09-14 04:40:22
正如我在我的评论中和你在W3C中引用的那样，h1是一个标题，而不是标题。每个剖分元素都可以有自己的标题元素。您不能将h1仅视为页面的标题，而应将其视为页面特定部分的标题。就像报纸的头版一样，每篇文章可以有自己的标题(或标题)。
Stack Overflow用户
发布于 2014-08-15 12:49:15
我建议从头到尾都使用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元素，您就可以显式地定义这些部分，而不必依赖于浏览器读取不同标题级别所创建的隐式部分。配备了HTML5的浏览器知道section元素中的所有内容都会在文档大纲中被“降级”一个级别。例如，section > h1在语义上被视为h2，section > section > h1被视为h3，等等。
令人困惑的是，浏览器仍然基于h2-h6标题级别创建隐式部分，而h2-h6元素不改变其样式。这意味着一个h2，无论它嵌套在多少部分中，仍然会看起来像一个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>Furthermore，你可以使用the element。此元素仅包含特定于页面的信息，不应包含在站点范围内重复的内容，如导航链接、站点页眉/页脚等。<body>中可能只有一个<main>元素。因此，您的解决方案可能就像这样简单：
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>Stack Overflow用户
发布于 2017-10-10 10:13:15
但是，不要忘记可访问性问题。根据MDN的说法，“目前还没有已知的在图形浏览器或辅助技术用户代理中实现outline algorithm。”这意味着屏幕阅读器可能无法计算出只有<h1>的部分的相对重要性。它可能需要更多的标题级别，比如<h2>和<h3>。
https://stackoverflow.com/questions/7405282
复制相似问题