相同级别的标题但不同的类别答案

【问题标题】：Same level headings but different category相同级别的标题但不同的类别
【发布时间】：2017-08-23 09:00:06
【问题描述】：

假设有一个主标题，它有几个子标题，可以通过给它们单独的标题来分类，但是它们的视觉传达方式与给它们单独的标题不同。

即：

在这种情况下我们应该如何使用标题标签？

我认为正确的做法（但不确定）是为这两个类别添加单独的 section 元素。

像这样：

有什么建议吗？

【问题讨论】：

标签： html semantic-markup html-heading

【解决方案1】：

请注意，section 元素是一个分段内容元素。这意味着它会在文档大纲中创建一个条目。如果你想使用h1-h6在大纲中对应的排名，你的h2标题应该变成h3标题。

另请注意，建议在适当的情况下明确使用分段内容元素（例如，至少在您使用标题元素的任何地方），因此您可能也希望将section 用于“我们做什么”等。

所以大纲相关的结构可能如下所示：

<body>
  <h1>Xyz Company</h1>

  <section>
    <h2>About us</h2>

    <section>
      <h3>What we do</h3>
    </section>

    <section>
      <h3>Where we are?</h3>
    </section>

    <section>
      <h3>Where we do?</h3>
    </section>

  </section>

  <section>
    <h2>Attributes</h2>

    <section>
      <h3>Respect</h3>
    </section>

    <section>
      <h3>Responsibility</h3>
    </section>

    <section>
      <h3>Growth</h3>
    </section>

  </section>

</body>

每个分节内容元素（以及每个分节根元素，即本例中的body）都有自己的标题，没有明确的分节就没有标题。

即使您不想提供“关于我们”和“属性”标题，您仍然可以保留两个 section 元素。不理想，但总比没有这些好，因为它们使预期的文档大纲清晰。（折衷办法是用 CSS 在视觉上隐藏这两个标题。）

【讨论】：

【解决方案2】：

从纯技术 SEO 的角度来看，如果两个部分都有自己的标题会更好，并且这些部分的内容都有副标题，所以你会寻找这样的东西：

<main>
    <h1>Your Company Name</h1>
    <section>
            <header>
                    <h2>About Us</h2>
                    <h3><a href="#what_we_do">What we do</a></h3>
                    <h3><a href="#where_we_are">Where we are</a></h3>
                    <h3><a href="#where_we_do">Where we do</a></h3>
            </header>
            <section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
    </section>
    <section>
            <header>
                    <h2>About Us</h2>
                    <h3><a href="#what_we_do">What we do</a></h3>
                    <h3><a href="#where_we_are">Where we are</a></h3>
                    <h3><a href="#where_we_do">Where we do</a></h3>
            </header>
            <section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
    </section>
</main>

通常我喜欢看没有任何 CSS/JavaScript 的页面，看看它的外观。如果您有相同的流程，并且默认情况下看起来应该如此，那么您就在正确的轨道上。搜索引擎足够聪明，可以理解您的意思，即使您对所有内容都使用 div，但使其语义正确可能会增加它们对您干净有序的代码的喜爱度。

为两者添加部分可能会有所帮助，但更有用的是此页面讨论的是特定主题，而不是多个主题。因此，我建议您为每个 About Us 和 Attributes 制作一个页面。如果它看起来有点矫枉过正，你可以只用一页；这是正确的，但在搜索引擎眼中并不是最优的——他们真的很喜欢每个主题都有一个页面，并且它们在域中是独一无二的。

【讨论】：

来自资深人士的建议 -- 我想我们应该欢迎您加入社区，Pedro。玩得开心！
欢迎 Pedro 加入社区，确实，您的方法是理想的方案，感觉就像我试图放弃标题级别 :)