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

我认为问题在于，在上面的代码中，我将导航放在h1之前。如果我把h1放在第一位，“HTML5大纲视图”给了我真正想要的页面结构：

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

在我的页面设计中（和许多其他页面一样）将导航首先放入h1然后放入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。

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

页面结构中的h1

2 个答案: