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.

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

This is how it will come up on the outline: any content after the h2 will be related to that specific section. However, I would like it to escape that h2 and have it become part of the h1.

回答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.)

回答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!!

来源：https://stackoverflow.com/questions/27698256/escaping-h-outline

标签

html5

structure

semantic-markup

html-heading

heading