Question

简而言之，HTML5规范允许我们使用多个h1元素。然而，关于此功能存在相当大的争议，有两个主要原因是为什么不使用它。

1。 SEO：主要是可疑的声称搜索机器人不支持它，而未经证实的声称它会“混淆”它们。但是，让我们将这种推测推迟到其他帖子。

2。用户代理不支持它：不幸的是，这背后的推理似乎不如SEO声明。

Sections and Outlines of an HTML5 Document的MDN文章提供了以下警告：

重要提示：目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现，尽管该算法是在其他软件中实现的，例如一致性检查器。因此，不能依赖轮廓算法将文档结构传达给用户。建议作者使用标题等级（h1-h6）来传达文件结构。

但它不像使用新文档大纲结构的文档不起作用。为了亲自了解浏览器的反应，我创建了一些使用多个独立文章在同一页面上的样本。

HTML4：

<!DOCTYPE html>
<html>
    <head>
        <title>Outline HTML4</title>
    </head>
    <body>
        <div>
            <h1>Section List</h1>
            <div>
                <h2>Alpha</h2>
                <p>Alpha is the first letter of the greek alphabet.</p>
                <h3>Subheading</h3>
                <p>This is just filler.</p>
            </div>
            <div>
                <h2>Beta</h2>
                <p>Beta is the second letter of the greek alphabet.</p>
                <h3>Subheading</h3>
                <p>This is just filler.</p>
            </div>
        </div>
    </body>
</html>

HTML5：

<!DOCTYPE html>
<html>
    <head>
        <title>Outline HTML5</title>
    </head>
    <body>
        <main>
            <h1>Section List</h1>
            <section>
                <h1>Alpha</h1>
                <p>Alpha is the first letter of the greek alphabet.</p>
                <h2>Subheading</h2>
                <p>This is just filler.</p>
            </section>
            <section>
                <h1>Beta</h1>
                <p>Beta is the second letter of the greek alphabet.</p>
                <h2>Subheading</h2>
                <p>This is just filler.</p>
            </section>
        </main>
    </body>
</html>

我看到的唯一可能的视觉问题是浏览器可能会将所有h1标记渲染为相同的大小，但Firefox和Chrome的默认用户代理样式目前会缩小{{1}的大小标记h1，article，aside和nav标记（似乎表示浏览器执行识别此功能）。另外，我们在识别第二个section标题意味着最后h2部分的结尾时没有任何问题，所以我认为没有任何理由我们会遇到多个{{1}的视觉问题标签。

虽然我不能代表那些依赖屏幕阅读器的人喜欢浏览网页，但Apple的VoiceOver确实能够正确识别每个标题级别。

我的问题是，图形浏览器或辅助技术必须做什么完全才能“支持”他们尚未做过的大纲？

Answer 1

以Jaws屏幕阅读器为例： http://webaim.org/resources/shortcuts/jaws#headings

它提供了转到同一级别的下一个标题的快捷方式。但添加了HTML5 section和article标记。这需要采取一些预防措施。

当你有这样的代码时：

<h1>Main title</h1>
<h2>sub part 1</h2>
<section>
   <h1>first section inside sub part 1</h1>
   <h2>subpart inside first section of sub part 1</h2>

</section>
<h2>sub part 2</h2>

如果您目前正在关注h2 ＆＃34;子部分1＆＃34; 并按下2键，您可能会转到 ＆＃34;子部分2＆＃34; （即同一级别的下一个标题），但辅助技术将引导您进入DOM阅读顺序中的下一个h2。

出于这个原因，你应该尊重整个文档中标题的层次结构，好像没有任何部分（即使它尊重HTML5）。

现在，您可以完美地想象h1中有两个body，但您希望有一些方法可以在不依赖title标记的情况下阅读当前页面的标题可以包含一些其他元素，如网站名称，网站中的类别/层次结构。因此，您应该只在h1元素中使用一个body元素作为当前页面的标题。

Answer 2

造型修改非常肤浅。你可以在下面的例子中看到，对h1＆＃34; gamma＆＃34;的h2子标题。标题以比＃34; h1＆＃34;更大的字体呈现。伽玛标题本身。

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Outline HTML5</title>
    </head>
    <body>
        <main>
            <h1>Section List</h1>
            <section>
                <h1>Alpha</h1>
                <p>Alpha is the first letter of the greek alphabet.</p>
                <h2>Subheading</h2>
                <p>This is just filler.</p>
                <section>
                  <h1>Gamma</h1>
                  <p>Gamma is the third letter of the greek alphabet.</p>
                  <h2>Subheading</h2>
                  <p>This is just filler.</p>
                </section>
            </section>
            <section>
                <h1>Beta</h1>
                <p>Beta is the second letter of the greek alphabet.</p>
                <h2>Subheading</h2>
                <p>This is just filler.</p>
            </section>
        </main>
    </body>
</html>

＆＃13;

在我看来，浏览器需要从大纲算法中计算每个元素的切片级别，然后通过CSS伪类公开它 - 例如div:level(3)或:matches(h1, h2, h3, h4, h5, h6):level(4)或仅:level(2)，并通过JavaScript将其公开为元素状态，例如if (document.getElementById("myElement").level == 4) { ... }

Answer 3

但它不像使用新文档大纲结构的文档不起作用。

为什么它不起作用？它们只是HTML元素，并且包含多个h1标记完全在浏览器呈现容量范围内。

正如您所提到的，需要考虑的问题是样式。除非您调整不同h1的样式，否则它们可能共享相同的视觉特征，例如大小。

我的问题是，图形浏览器或辅助技术必须做什么完全才能“支持”他们尚未做过的大纲？

用户代理呈现HTML代码。如前所述，浏览器可以轻松呈现多个h1和depending on implementation HTML5元素。

然而，outline是另一回事。大纲基本上是DOM中的部分列表。通常，这个大纲可以用有用和有益的方式呈现给用户。

使用此HTML outlining tool，我打了 http://www.dell.com ，它生成了一个干净，有条理的网站大纲。

您突出显示的警告是，HTML5 大纲算法未得到广泛支持，无法传达类似的有用结果。

4.3.10.1 Creating an outline

目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现，尽管该算法是在其他软件中实现的，例如一致性检查器。 因此，不能依赖大纲算法将文档结构传达给用户。 建议作者使用标题等级（h1-h6）来传达文档结构。 （强调我的）

这并不意味着代码不起作用，只是在语义上它可能很弱和/或无用。

更多信息：

Answer 4

浏览器需要支持哪些HTML5文档大纲？

根据Outlines in HTML5 - A vocabulary and associated APIs for HTML and XHTML浏览器，需要支持分区内容和分割根元素。

警告只表示到目前为止（发布之日）文档编辑器未知任何实现。

浏览器需要什么来支持HTML5文档大纲？

4 个答案: