正确使用标题元素答案

【问题标题】：Proper use of headline-elements正确使用标题元素
【发布时间】：2017-09-30 09:14:12
【问题描述】：

我知道最上面的标题必须使用<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>

【问题讨论】：

【解决方案1】：

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

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

从上面的 sn-p 可以看出，它很狡猾，不能很好地工作。第一个<p> 标记不起作用，但在关闭<h2> 标记后，<p> 标记可以正常工作。照常做就是我想说的！

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

没有规定必须在<h1>之后写<h2>，你可以选择任何你喜欢的，大小最重要。如果你想要大标题然后去<h1>。

【讨论】：