'Should I nest a slider inside of <header> tag?

I am currently working on a website, where the site will have a hero slider at the top of the page, under the navigation. Currently, I have written the code like this:

<header>
  <h1 class="site-title">Site Title</h1>
  <nav id="primary">
    <ul class="top-level">
      <li class="link">Link</li>
      <li class="link">Link</li>
      <li class="link">Link</li>
      <li class="link">Link</li>
      <li class="link">Link</li>
    </ul>
  </nav>
</header>
<section id="hero-banner">
  <!-- Banner Content -->
</section>

But I am wondering if it would be appropriate to also include the hero slider inside of the <header> tag? In that case, the code would turn into this:

<header>
  <h1 class="site-title">Site Title</h1>
  <nav id="primary">
    <ul class="top-level">
      <li class="link">Link</li>
      <li class="link">Link</li>
      <li class="link">Link</li>
      <li class="link">Link</li>
      <li class="link">Link</li>
    </ul>
  </nav>
  <section id="hero-banner">
    <!-- Banner Content -->
  </section>
</header>

Visually, I would consider the hero banner to be grouped with the rest of the <header>, but I'm not sure if reflecting this in the code would be considered semantically correct.

htmlheaderslider


Solution 1:[1]

From w3schools:

The element represents a container for introductory content or a set of navigational links. A element typically contains:

  • one or more heading elements (<h1> - <h6>)
  • logo or icon
  • authorship information

In the end, it's entirely up to you, it's not "bad practice" or "good practice" one way or the other.

Solution 2:[2]

It is better to put it outside the <header> tag. As it is not considered as an element of the menu nor the navigation bar. So you are good to go with the first code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Abramo

Related Questions