Why we should wrap 1 element into section tags?

HTML-CSS
#1

Tell us what’s happening:

I don’t know why we should wrap h3 tag into section tag, I think we don’t need section tag, because h3 tag also has semantic meaning…
Thanks!!

Your code so far


<body>

<div>
  <h1>Training with Camper Cat</h1>
</div>


<main>
  <section id="stealth">
    <h2>Stealth &amp; Agility Training</h2>
    <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
    <article><h3>No training is NP-complete without parkour</h3></article>
  </section>
  <section id="combat">
    <h2>Combat Training</h2>
    <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
    <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
  </section>
  <section id="weapons">
    <h2>Weapons Training</h2>
    <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
    <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
  </section>
</main>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36.

Challenge: Make Screen Reader Navigation Easier with the header Landmark

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark

#2

You mean the stealth, combat and weapons sections?

The section element is just a generic container element. There are many reasons why you may want to group content inside some common container (styles, organization, etc.). It also makes sense if you look at the three sections as dealing with different sub-content of some main content.

<main>
  <section class="product-info">
    <h2>Our amazing product</h2>
    <section class="product-benefits">
      <h3>What you get</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>
    <section class="product-tiers">
      <h3>What we offer</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>
    <section class="product-prices">
      <h3>What the prices are</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>
  </section>
</main>
1 Like
#3