html - 如何处理子页面上的多个h1元素

Question

根据 HTML5.1 规范，如以下链接所述，每个页面都应该只有一个 h1 元素。自然地，我觉得首页上的h1元素应该是描述网站本身的标题。这就提出了一个问题，如果主页上使用的 h1 元素用于 header 中，您如何正确处理子页面上的 h1 header ？

例如，假设我们正在为 Adam's Sweet Shop 构建一个网站，我们创建布局并创建标题:

<header>
    <h1>Adam's Sweet Shop</h1>
    ...[other header elements]
</header>

现在，主页就可以正常工作了。但是当我们深入研究子页面时，我们有两个选择。我们创建了一个不同的 h1 元素来描述该页面，并将 header h1 委托(delegate)给另一个标签。这似乎可以满足 HTML5.1 规范的要求，但它几乎看起来很“hacky”，而且对于模板，这将需要两个不同的头文件。

第二种选择是创建两个 h1 元素，一个在 header 中描述网站，另一个在 main 元素中描述页面。

<header>
    <h1>Adam's Sweet Shop</h1>
    ...[other header elements]
</header>
<main>
    <h1>About Adam's Sweet Shop</h1>
    ...[other body elements]
</main>

这显然违反了 HTML5.1 规范，但似乎不那么骇人听闻。我最初使用第二种方法构建了一个站点，但收到了来自 W3C 验证程序的警告消息。

这些方法是否正确，如果不正确，什么是更好的方法，例如，描述“真实”h1 的 ARIA 标签？

https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

Answer 1

如果在您的网站设计中使用 h1 效果更好在header和另一个 h1在main ，那就是你应该做的。 canonical HTML spec 都不是也没有它的 W3C 副本说你不应该使用多个 h1每个文档的元素，如果这满足您的需求。和 W3C HTML checker 不会为问题中的标记示例报告任何错误或警告。

就任何可访问性问题而言，真正的屏幕阅读器会报告这两个 h1标题处于同一(顶级)级别，但这似乎也适用于这种特殊情况——拥有几个顶级标题并不是绝对的问题。 (尽管相比之下，如果您用 h1 标记整个文档中的每个部分，这对屏幕阅读器来说将是一个问题——这就是为什么 HTML 会针对这种情况发出警告(这与您的情况非常不同)。