页面结构中的h1

Question

（我不确定在这里问这个问题是否合适，如果不合适请推荐合适的论坛）

我的页面结构很简单：

<nav>
<h2>Menu</h2>
<ul>
    <li>first</li>
    <li>second</li>
</ul>
</nav>

<h1>This is the h1</h1>
<p>This is a paragraph</p>

<h2>This is the h2</h2>
<p>This is a paragraph</p>

我使用 Chrome 扩展 "HTML5 Outliner" 来检查页面结构是否正确。令我惊讶的是，这就是它给我的：

1- Untitled BODY
    1- Menu
2- This is the h1
    1- This is the h2

我认为问题在于，在上面的代码中，我将 nav 放在了 h1 之前。如果我把 h1 放在第一位，"HTML5 Outliner" 会给出我真正想要的页面结构：

1- This is the h1
    1- Menu
    2- This is the h2

在我的页面设计中（和许多其他页面一样），将导航放在第一位，然后是 h1 更有意义。

我的问题是：
1- 我在这里给出的结构是否正确？
2- 是那个不能正常工作的扩展的问题吗？如果是这样，谁能推荐我另一种检查我网站页面结构大纲的好方法？

Answer 1

您可以做的是相应地构建您的 html：

页眉
Main（注意：页面上只能有一个main元素）
页脚

<header>
    <nav>
        <h2>Menu</h2>
        <ul>
            <li>first</li>
            <li>second</li>
        </ul>
    </nav>
</header>

<main>
    <h1>This is the h1</h1>
    <p>This is a paragraph</p>

    <h2>This is the h2</h2>
    <p>This is a paragraph</p>
</main>

<footer>
    <!-- Optional footer stuff -->
</footer>

Answer 2

如果文档结构需要，<h1> 可以放在其他标题之后。在这种情况下，我认为您不需要 <h2>Menu</h2> - 每个人都看到链接块是菜单。如果没有，请尝试在 UX 上工作。

请记住，没有自动代码 checker/validator 无法判断代码的好坏。这个插件只能推荐一些东西，但是标题结构没有严格定义。您可以使用您需要的订单，您可以错过和标题级别等。

页面结构中的h1

The h1 in the structure of a page

html

structure

semantics