Is this nesting of HTML elements invalid or semantically incorrect? main > section > header > h1

41 Views Asked by At

I submitted a solution on a front-end component and I was told that the header should not have H1s within it, that it is a landmark outside the main tag and it has a "banner" role meaning it is for repeating content across a site.

I tried researching on AI tools, but I got different information.

Here is what I tried. I was building out a card component.

<main>
   <section>
      <header>
            <h1 class="order-summary">Order Summary</h1>

            <p class="order-summary-text">
              You can now listen to millions of songs, audiobooks, and podcasts
              on any device anywhere you like!
            </p>
      </header>
   </section>
</main>
0

There are 0 best solutions below