如何处理子页面上的多个h1元素
How to deal with multiple h1 elements on subpages
根据 HTML5.1 规范，如下面 link 所述，每一页都应该只有一个 h1 元素。自然地，我觉得主页上的h1元素应该是描述网站本身的标题。这就提出了一个问题，如果首页使用的h1元素在header中使用，如何正确处理子页面上的h1header？
例如，假设我们正在为 Adam's Sweet Shop 构建网站，我们创建布局并创建 header:
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
现在，这对主页来说效果很好。但是当我们深入研究子页面时，我们有两个选择。我们创建了一个不同的 h1 元素来描述该页面，并将 header h1 委托给另一个标签。这似乎可以满足 HTML5.1 规范的要求，但看起来几乎 'hacky'，而且对于模板，这将需要两个不同的 header文件。
第二个选项是创建两个 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 验证程序的 警告 消息。
这些方法是否正确，如果不正确，什么是更好的方法，例如，描述 'real' h1 的 ARIA 标签？
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
如果在 header 中有一个 h1 并且在 main 中有另一个 h1 在您的站点设计中效果更好，那么这就是您应该做的。 canonical HTML spec nor the W3C copy of it say you shouldn’t use more than one h1 element per document if that’s what meets your needs. And the W3C HTML checker 不会针对问题中的标记示例报告任何错误或警告。
就任何可访问性问题而言，屏幕阅读器确实会将这两个 h1 标题报告为处于同一（顶级）级别，但这似乎也适用于这种特殊情况——事实并非如此有几个 top-level 标题绝对是个问题。 （尽管相比之下，如果您用 h1 标记整个文档中的每个部分，这对屏幕阅读器来说将是一个问题——这就是为什么 HTML 会针对这种情况发出警告（这与你的情况）。
编辑
阅读 through some discussions 后，如果您关心辅助技术或浏览器大纲，我将不再推荐使用多个 h1 标签，直到实现标准化。
我原来的回答应该在将来有效并用于 SEO 目的，但不能保证这一点。
原回答
您可以在一个页面上有多个 h1 并使用正确的分区。 在 HTML5 中，文档大纲的创建方式与以前的版本不同。
在HTML5之前，整个页面被认为是"root document"，而h1被用来描述这个词根。 HTML 文件和大纲中的文档之间存在简单的 one-to-one 关系。这对 SEO 很重要，因为引擎使用这些轮廓来猜测您的页面是关于什么的，混淆它们是一个坏主意。
HTML5引入了sectioning content，例如article、section、header、footer等。根据规范，
Sectioning content is content that defines the scope of headings and footers.
Each sectioning content element potentially has a heading and an outline.
这意味着您可以为每个以此方式创建的新大纲使用 h1 标签，因为
Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.
因此，如果您在 "child" 大纲中使用 h1，例如通过将其嵌套在 article 中，它不会干扰大纲（以及 SEO）你的 parent 大纲。
因此，出于所有意图和目的，
<html>
<head>
</head>
<body>
<h1>
My awesome collection of articles
</h1>
[ ... some content ... ]
<article>
<h1>
My awesome article
</h1>
</article>
</body>
</html>
是对 headers 和 HTML5 中分段的有效使用。此外，this article 几乎使用您的示例在直观地解释所有这些方面做得很好。
HTML 5.1没有限制只能有一个h1
唯一的要求是：
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
这意味着：
- 您必须以
h1、 开头
- 你必须尊重
h1>h2>h3... 层次结构，
- 一个标题开始一个新的部分，
- 但您完全可以在与第一个部分相同的级别开始一个新部分
因此，根据 HTML 规范，main 和 header 部分中都有一个 h1 是可以的，
这是可能的，但它（通常）是糟糕的设计。
您应该始终考虑到您的 h1 应该是网页标题（而 <title> 元素可能已经包含您的网站标题）。出于各种原因，包括 SEO 和可访问性，网页有两个标题毫无意义。
所以在技术上是可行的，HTML 可以用于格式化复杂的 multi-documents，但是如果可以避免，请保持简单。
根据 HTML5.1 规范，如下面 link 所述，每一页都应该只有一个 h1 元素。自然地，我觉得主页上的h1元素应该是描述网站本身的标题。这就提出了一个问题，如果首页使用的h1元素在header中使用，如何正确处理子页面上的h1header？
例如，假设我们正在为 Adam's Sweet Shop 构建网站，我们创建布局并创建 header:
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
现在，这对主页来说效果很好。但是当我们深入研究子页面时，我们有两个选择。我们创建了一个不同的 h1 元素来描述该页面，并将 header h1 委托给另一个标签。这似乎可以满足 HTML5.1 规范的要求，但看起来几乎 'hacky'，而且对于模板，这将需要两个不同的 header文件。
第二个选项是创建两个 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 验证程序的 警告 消息。
这些方法是否正确，如果不正确，什么是更好的方法，例如，描述 'real' h1 的 ARIA 标签？
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
如果在 header 中有一个 h1 并且在 main 中有另一个 h1 在您的站点设计中效果更好，那么这就是您应该做的。 canonical HTML spec nor the W3C copy of it say you shouldn’t use more than one h1 element per document if that’s what meets your needs. And the W3C HTML checker 不会针对问题中的标记示例报告任何错误或警告。
就任何可访问性问题而言，屏幕阅读器确实会将这两个 h1 标题报告为处于同一（顶级）级别，但这似乎也适用于这种特殊情况——事实并非如此有几个 top-level 标题绝对是个问题。 （尽管相比之下，如果您用 h1 标记整个文档中的每个部分，这对屏幕阅读器来说将是一个问题——这就是为什么 HTML 会针对这种情况发出警告（这与你的情况）。
编辑
阅读 through some discussions 后，如果您关心辅助技术或浏览器大纲，我将不再推荐使用多个 h1 标签，直到实现标准化。
我原来的回答应该在将来有效并用于 SEO 目的，但不能保证这一点。
原回答
您可以在一个页面上有多个 h1 并使用正确的分区。 在 HTML5 中，文档大纲的创建方式与以前的版本不同。
在HTML5之前，整个页面被认为是"root document"，而h1被用来描述这个词根。 HTML 文件和大纲中的文档之间存在简单的 one-to-one 关系。这对 SEO 很重要，因为引擎使用这些轮廓来猜测您的页面是关于什么的，混淆它们是一个坏主意。
HTML5引入了sectioning content，例如article、section、header、footer等。根据规范，
Sectioning content is content that defines the scope of headings and footers. Each sectioning content element potentially has a heading and an outline.
这意味着您可以为每个以此方式创建的新大纲使用 h1 标签，因为
Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.
因此，如果您在 "child" 大纲中使用 h1，例如通过将其嵌套在 article 中，它不会干扰大纲（以及 SEO）你的 parent 大纲。
因此，出于所有意图和目的，
<html>
<head>
</head>
<body>
<h1>
My awesome collection of articles
</h1>
[ ... some content ... ]
<article>
<h1>
My awesome article
</h1>
</article>
</body>
</html>
是对 headers 和 HTML5 中分段的有效使用。此外，this article 几乎使用您的示例在直观地解释所有这些方面做得很好。
HTML 5.1没有限制只能有一个h1
唯一的要求是：
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
这意味着：
- 您必须以
h1、 开头
- 你必须尊重
h1>h2>h3... 层次结构， - 一个标题开始一个新的部分，
- 但您完全可以在与第一个部分相同的级别开始一个新部分
因此，根据 HTML 规范，main 和 header 部分中都有一个 h1 是可以的，
这是可能的，但它（通常）是糟糕的设计。
您应该始终考虑到您的 h1 应该是网页标题（而 <title> 元素可能已经包含您的网站标题）。出于各种原因，包括 SEO 和可访问性，网页有两个标题毫无意义。
所以在技术上是可行的，HTML 可以用于格式化复杂的 multi-documents，但是如果可以避免，请保持简单。