Placement of <header> and <nav>

HTML-CSS
1

Hi there,
I’ve just started working on the Technical Documentation Page challenge and have a question regarding the <header> and <nav> tags.

For the <header> tag, it says on Developer Mozilla that

The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.

Given that the <header> can include navigational aids which I take that to mean nav links, I see that there are examples from various sources showing the <nav> tag nested inside the <header> such as this from W3C:

<header>
    <h1>Little Green Guys With Guns</h1>
    <nav>
      <ul>
      ...
      </ul>
    </nav>
    ...
</header>

Yet in the example pen for the documentation challenge, I see the <header> inside <nav> like so:

<nav id="navbar">
  <header>JS Documentation</header>
  <ul> 
    <a class="nav-link" href="#Introduction">
... 
</ul> 
</nav>

Is that generally the practice too, to nest <header> inside <nav>?

Thanks!

2

Since <header> is supposed to be used in a sectioning element, and <nav> is a sectioning element, you can nest <header> inside a <nav>

1 Like
3

I see… Thanks for clearing that up. :slight_smile: