html - 转义 h 轮廓

Question

因此，我一直在尝试找出在与较低级别的标题挂钩后添加内容的最佳方式。

<section> 
  <h1>Title of Section</h1>
  <h2>Related 1</h2>
  <h2>Related 2</h2>
     <p>I NEED THIS TO BE PART OF H1</p>
</section>

这就是它出现在大纲中的方式：之后的任何内容h2都将与该特定部分相关。但是，我希望它摆脱这种情况h2并让它成为h1.

Answer 1

明确地使用分段内容元素（section, article, aside, ），这是HTML5 规范所推荐的：nav

还鼓励作者在分节内容的元素中显式包装节，而不是依赖于在分节内容的一个元素中具有多个标题所生成的隐式节。

因此，您的代码段可能如下所示：

<section> 
  <h1>Title of Section</h1>
  <section>  
    <h2>Related 1</h2>
  </section>
  <section>  
    <h2>Related 2</h2>
  </section>
  <p>I NEED THIS TO BE PART OF H1</p>
</section>

该p元素现在在标题“章节标题”的范围内。

（而不是section，考虑其他三个分段内容元素之一是否合适，例如，aside。）

Answer 2

好的，所以应该是这样的：

<section or article>
  <h1>Types of Foods</h1>
      <section>
         <h2>Fruits</h2>
            <p>Intro of fruits</p>
              <section>
               <h3>Bananas</h3>
                  <p>about bananas</p>
              </section>
              <section>
               <h3>Apples</h3>
                  <p>about apples</p>
              </section>
           <p>Conclusion of fruits</p>
      </section>
      <section>
         <h2>Vegetables</h2>
            <p>Intro of vegetables</p>
              <section>
               <h3>Lettuce</h3>
                  <p>about lettuce</p>
              </section>
              <section>
               <h3>Carrots</h3>
                  <p>about carrots</p>
              </section>
           <p>Conclusion of vegetables</p>
      </section>
  <p>Conclusion of Types of Foods</p>
</section or /article>

谢谢你的帮助！！