正确使用标题要素

Question

我知道最顶级的标题必须使用<h1>，小标题<h2>等等，但我的问题是<h1>和<h2>是否可以是兄弟姐妹或者<h2> - 元素是否总是需要比<h1>更低层次结构？

<h1>Top Headline</h1>
<p>Some paragraph</p>
<h2>Sub-Headline</h2>
<p>Some paragraph</p>

（这可以吗？）

或者它是否需要像以下一样正确使用？

<div>
    <h1>Top Headline</h1>
    <p>some paragraph</p>
    <div>
        <h2>Subheadline</h2>
        <p>some paragraph</p>
    </div>
</div>

Answer 1

h2永远不应该在内h1（即作为子元素）或类似内容。你的代码基本没问题。一般来说，它应该使用整个层次结构，例如仅在h2之后的h3，始终以h1开头，不跳过任何级别等。布局无关紧要（可以使用CSS和类更改）无论如何你想要的，但特别是对于可访问性和SEO。

添加：DIV不计入语义（它们没有分层或语义功能），所以你的第二个例子和第一个例子一样好。

Answer 2

h1和h2完全可以是兄弟姐妹。我通常使用h1作为我的大标题（通常像页面标题或有时是节标题），然后h2，h3，h4等用于其他各种分层元素。你的两个例子都非常好，而且非常普遍。我不认为有正确或错误的方式来构建标题元素。

注意：我认为标题标签确实在SEO方面发挥了轻微作用，因此可能值得研究。我不太了解真正的评论。

Answer 3

那（你的后一个例子）根本不是好的代码，但它有时会起作用。使用它绝对没有意义。在此之后，您可以比以下代码片段更好地执行以下代码：

<h1>Top Headline</h1>
<p>Some paragraph</p>
<h2>Sub-Headline</h2>
<p>Some paragraph</p>

（编码错误:)

<h1>Top Headline
<p>Some paragraph</p>
<h2>Sub-Headline</h2>
<p>Some paragraph</p>
</h1>

从上面的代码片段可以看出，它很狡猾并且效果不佳。第一个<p>代码无效，但在您关闭<h2>代码后，<p>代码工作正常。正常做就是我想说的！

Answer 4

没有这样的规则，你必须在<h2>之后写<h1>，你可以选择任何你喜欢的，大小是重要的。如果你想要大标题，那就去<h1>。