同级标题不同类别

Question

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

即：

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

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

像这样：

有什么建议吗？

Answer 1

从纯技术 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，但在语义上正确可能会增加它们对您整洁有序的代码的相似度。

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

Answer 2

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

另请注意，建议在适当的地方明确使用分段内容元素（例如，至少在您使用标题元素的任何地方），因此您可能希望将 section 用于 "What we do" 等，也是。

因此 outline-relevant 结构可能如下所示：

<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）都有自己的标题，没有明确的分节就没有标题。

即使您不想提供 "About us" 和 "Attributes" 标题，您仍然可以保留这两个 section 元素。不理想，但总比没有好，因为它们使预期的文档大纲清晰。（妥协可能是用 CSS 在视觉上隐藏这两个标题。）

同级标题不同类别

Same level headings but different category

html

semantic-markup

html-heading