Using <header> tags in every <section> elements

Feedback & Requests
1

I was taking “Web Development Foundations Exam part 2”, and the exam shows this kind of code below:

<body>
       <header>
         </header>

   <section>
       <header>
         </header>
   </section>

    <section>
       <header>
         </header>
    </section>
</body>

<!--this is just example -- >

There are header tags in every section elements and in my opinion, this is not a best practice for HTML structure ( I have never seen the website structed like this).

header elements represents the heading of whole HTML document and contains logo, main visual, nav menu etc.

So the code better to be like this:

<body>
       <header>
            <h1>Page title</h1>
            <img src="main-visual.png">
         </header>

     <section>
        <h2>Section heading</h2>
         <div>Contents 1</div
     </section>

    <section>
       <h2>Section Heading</h2>
        <div>Contents 2</div>
    </section>

<footer>
</footer>

</body>

I just want to clarify about the best practice for my understanding.
Just started Codeacademy recently.

Thanks for reading.

2

The W3 HTML standard gives a definition for the tag as:

The header element represents a group of introductory or navigational aids.

Note: A header element is intended to usually contain a heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

While the MDN documentation gives the following examples (note the <header> tags used as introductory content for the <article> tags):

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</article>

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

(There’s a bit more relevant stuff under the ‘Usage notes’ of that page, but that’s more than I’ll paste in but feel free to give it a read if you’re interested!)

The tl;dr of those pages is it provides introductory content such as the heading tags (hence the name) for a particular page/section, rather than strictly being reserved for the navbar.

I personally only use it for a navbar most of the time, but that’s just overuse of divs and lack of being bothered with too many semantic elements (which is a habit I should definitely start to correct haha!), but what Codecademy is teaching is inline with the tag’s intended use :slight_smile:

2 Likes