Question

我真的很想让HTML5大纲正确并且还要牢记SEO。我只想在页面上使用1x H1，这必须是内容文章标题。但HTML5大纲强迫我给标题和导航部分一个标题。否则它会说“无题身体”或“无题导航部分”。但是在我的页面上有2x H1是不对的。

这是现在的结构：

<body>
    <header>
        <h1>Company name</h1>
        Logo img
    </header>
    <nav>
        <h2>Main nav</h2>
        <ul></ul>
    </nav>
    <main role="main" id="main">
        <section>
            <header>
                <h1>Article</h1>
            </header>
            <p>Content</p>
            <h2>Article subtitle</h2>
        </section>
    </main>
    <footer>
        <nav>
            <h2>Footer nav</h2>
            <ul></ul>
        </nav>
    </footer>
</body>

大纲如下：

1. Company name
    1. Main nav
    2. Article
        1. Article subtitle
    3. Footer nav

大纲看起来没问题，但是带有多个H1标题的HTML代码感觉不对。有什么想法吗？

Answer 1

如果您不想在第一个header和nav中添加标题，请将其删除。您不需要关心任何显示“HTML5大纲”的开发人员工具，因为browser don’t do anything with the HTML outline algorithm and neither do screen readers or any other tools for end users。

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

<body>
  <h1>My document</h1>
  …
  <section>
    <h2>Foo</h2>
    …
    <section>
      <h3>Bar</h3>

...并使用标题正确构建标记意味着不做这样的事情：

<body>
  <h1>My document</h1>
  …
  <section>
    <h1>Foo</h1>
    …
    <section>
      <h1>Bar</h1>

也就是说，如果您关心屏幕阅读器用户，那么不在嵌套部分中使用h1。

您不应该这样做的原因是：HTML规范中的“HTML5大纲”表示，对于辅助技术（AT）目的（屏幕阅读器），浏览器必须遵循大纲算法来分配标题级别，以便嵌套h1标题会显示为h2 - 级别和h3级标题 - 但浏览器实际上并未遵循HTML规范中的大纲算法。< / p>

相反，浏览器会将任何嵌套h1标题的标题级别公开给AT，就像h1 - 级别标题一样 - 无论你在嵌套{{ {1}}元素。

这意味着，当屏幕阅读器用户尝试浏览上面的示例时，他们只会将其视为仅包含section级标题的文档 - 他们将看不到标题的任何结构。，因为浏览器实际上并不遵循HTML5大纲算法。

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

Answer 2

我只想在页面上使用1x H1，这必须是内容文章标题。

我不知道你在哪里听到因为SEO的原因你应该在页面上只有一个H1。至少在我们进入新的千年之后，情况就不是这样了。你给搜索引擎的信誉太少了。他们可以为您的页面编制索引，无论它是零，一个还是五十个H1。

HTML5大纲和多个H1 SEO

2 个答案: