正确使用 headline-elements

Question

我知道最顶层的标题必须用<h1>、sub-headline、<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

没有一定要在<h1>后面写<h2>的规定，大家可以随意选择，大小不限。如果您想要大标题，请选择 <h1>。

Answer 2

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

<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 3

h2 永远不应在内部 h1（即作为子元素）或类似元素。你的代码基本上没问题。一般来说，它应该使用整个层次结构，比如 h3 仅在 h2 之后，总是以 h1 开始，不跳过任何级别等。布局无关紧要（这可以用 [=19 更改） =] 和类随心所欲），但特别是对于可访问性和 SEO。

补充：DIV 不考虑语义（它们没有层次或语义功能），所以你的第二个例子和第一个一样好。

Answer 4

h1和h2完全可以是兄妹。我通常将 h1 用于我的大标题（通常像页面标题或有时是章节标题），然后将 h2、h3、h4 等用于其他各种层次元素。你的两个例子都很好，而且都很常见。我认为构建 header 元素的方式没有对错之分。

注意：我相信 header 标签在 SEO 方面确实起到了轻微的作用，因此可能值得研究。我不太了解，无法对此发表评论。

Proper use of headline-elements