Escaping H Outline

So I’ve been trying to figure out what is the best way to add content after a being hooked to a lower level title.

Title of Section

<

Solution 1:

Use sectioning content elements (section, article, aside, nav) explicitly, which is what the HTML5 spec recommends anyway:

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

So your snippet could look like:

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

The p element is now in scope of the heading "Title of Section".

(Instead of section, consider if one of the other three sectioning content elements is appropriate, e.g., aside.)

Solution 2:

Ok, so it should be this way:

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

Thanks for your help!!