Question

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

例如，我们假设我们正在为 Adam的Sweet Shop 建立一个网站，我们创建了布局并创建了标题：

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

现在，这适用于主页。但是当我们深入研究这些子页面时，我们有两种选择。我们创建了一个描述该页面的不同h1元素，并将标题h1委托给另一个标记。这似乎满足了HTML5.1规范的要求，但它几乎看起来很糟糕，而且对于模板而言，这需要两个不同的标题文件。

第二个选项是创建两个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验证器的警告消息。

这些方法中的任何一种都是正确的，如果没有，那么什么是更好的方法，例如，ARIA标签描述了真正的＆＃39; h1？

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会针对该情况发出警告（这与您的情况非常不同）。

Answer 2

修改的

在阅读through some discussions之后，如果您关注辅助技术或浏览器大纲，我将不再建议使用多个h1代码，直到实施标准化为止。< / p>

我的原始答案应该将来有效并用于搜索引擎优化目的，但不能保证。

原始回答

您可以在一个页面上使用正确的切片创建多个h1。在HTML5中，文档大纲的创建方式与以前的版本不同。

在HTML5之前，整个页面被视为“根文档”，h1用于描述此根。这是HTML文件和大纲中文档之间简单的一对一关系。这对于搜索引擎优化非常重要，因为引擎使用这些大纲来猜测你的网页是什么，并且混淆它们是一个坏主意。

HTML5引入了sectioning content，例如article，section，header，footer等。根据规范，

分区内容是定义标题和页脚范围的内容。每个切片内容元素都可能包含标题和大纲。

这意味着您可以为以这种方式创建的每个新大纲使用h1标记，因为

据说某些元素是切片根，包括blockquote和td元素。这些元素可以有自己的轮廓，但这些元素中的部分和标题不会影响其祖先的轮廓。

因此，如果您在“子”轮廓中使用h1，例如将其嵌套在article中，则不会干扰您父级轮廓的轮廓（以及SEO）

所有意图和目的，

<html>
    <head>
    </head>
    <body>
        <h1>
            My awesome collection of articles
        </h1>
        [ ... some content ... ]
        <article>
            <h1>
                My awesome article
            </h1>
        </article>
    </body>
</html>

是HTML5中标题和分段的有效使用。此外，this article使用几乎您的示例在视觉上解释所有这些方面做得很好。

Answer 3

HTML 5.1对于只有一个`h1`

没有限制

唯一的要点是：

切片内容元素中标题内容的第一个元素表示该部分的标题。等级或更高等级的后续标题开始新的（隐含的）部分，较低等级的标题开始隐含的子部分是前一部分的一部分。在这两种情况下，元素代表隐含部分的标题。

这意味着：

您必须以h1，
您必须尊重h1＆gt; h2＆gt; h3 ... hiererarchy，
标题会开始一个新的部分，
但您可以完全开始与第一个相同级别的新部分

根据HTML规范，在h1和main部分都有一个header很好，

它可能，但它（通常）设计不好。

您应该始终认为您的h1应该是网页标题（而<title>元素可能已包含您的网站标题）。由于包括SEO和可访问性在内的各种原因，网页上有两个标题是没有意义的。

因此，技术上可行，HTML可用于格式化复杂的多文档，但如果可以避免，请保持简单。

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

3 个答案:

HTML 5.1对于只有一个`h1`

它可能，但它（通常）设计不好。

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

3 个答案:

HTML 5.1对于只有一个h1

它可能，但它（通常）设计不好。

HTML 5.1对于只有一个`h1`