我真的很努力地使HTML5大纲正确，同时也牢记SEO。 我只想要页面上的1x H1，这必须是内容文章标题。 但是HTML5大纲迫使我给标题和导航部分赋予标题。 否则，它将显示"无标题的正文"或"无标题的导航部分"。 但是在我的页面上放置2倍H1感觉不对。

现在是这样的结构：

Company name

Logo img

Main nav

Article

Content

Article subtitle

Footer nav

大纲如下所示：

1. Company name

1. Main nav

2. Article

1. Article subtitle

3. Footer nav

轮廓看起来不错，但是带有多个H1标题的HTML代码感觉不正确。 有什么想法吗？

创建轮廓

如果您不想在第一个header和nav中使用标题，则只需将它们放下即可。您无需担心任何显示" HTML5轮廓"的开发人员工具，因为浏览器不会使用HTML轮廓算法执行任何操作，屏幕阅读器或面向最终用户的任何其他工具也不会。

使用标题正确构造标记对于屏幕阅读器用户很重要。但是，对于屏幕阅读器用户来说，正确执行此操作的最佳实践方法是使用显式h1-h6标题，而不是不按顺序使用它们，并且不要使用嵌套的h1。特别是，如果您使用的是section，则使用标题正确构造标记意味着您可以执行以下操作：

My document

…

Foo

…

Bar

…并正确使用标题来构造标记意味着不要执行以下操作：

My document

…

Foo

…

Bar

也就是说，如果您关心屏幕阅读器用户，则不要在这样的嵌套部分中使用h1。

您不应该这样做的原因是：HTML规范中的" HTML5大纲"指出，出于辅助技术(AT)的目的(屏幕阅读器)，浏览器必须遵循大纲算法来分配标题级别，以使嵌套的h1标题改为显示为h2级和h3级标题-但是浏览器实际上并不遵循HTML规范中的大纲算法。

取而代之的是，浏览器将所有嵌套的h1标题的标题级别都以h1级别的标题的形式显示给AT －无论嵌套section元素中的标题有多低。

这意味着，当屏幕阅读器用户尝试浏览上面的示例时，他们只会将其视为仅具有h1级别标题的文档-他们将看不到更多的标题结构，因为浏览器没有实际上遵循HTML5轮廓算法。

也就是说，浏览器不会为嵌套的h1标题分配不同的标题级别，尽管HTML规范说必须这样做。浏览器只是忽略了这一要求。

轮廓对于屏幕阅读器很重要，标题应代表内容的准确轮廓。对于缺乏视觉的用户来说也很重要。因此使用WAI-ARIA至关重要。 w3.org/WAI/standards-guidelines/aria

@Stphane我建议您考虑花些时间来阅读developer.paciellogroup.com/blog/2013/10/html5-document-outline

嗨，我读了一下，它有点过时了。没有有关视觉缺陷用户和屏幕阅读器的参考。但是在这种情况下，大纲是必不可少的，使用–

可以帮助盲人和视障用户浏览我们的文档，这对于使用屏幕阅读器的人来说也是很常见的。因此，出于可访问性的原因，我们需要更加认真地对待结构。

与屏幕阅读器链接的有趣轮廓，以及通过理解页面目的而使用辅助技术的目的：accessiblehtmlheadings.com

在本文的medium.com/alistapart/中，"用标题正确构造标记很重要"段落，很好地说明了轮廓对于屏幕阅读器的重要性，它将帮助用户使用辅助技术。即使禁用CSS，该页面也必须具有良好的结构。

I only want 1x H1 on the page, and this has to be the content article title.

我不知道您在哪里听说出于SEO原因页面上应该只有一个H1。至少自进入新千年以来，情况并非如此。您给搜索引擎的信誉太少了。他们可以为您的页面编制索引，无论页面的零，一或五十个H1是否正确。