Can i use the <nav> element outside of the <header> element?

Hello everyone,

Currently if i’m working with HTML semantics i’m usually put my nav element inside of the header element like so:

    <header>
      <nav>
          <!-- unordered list to create the navigation bar (and logo?) -->
      </nav>
        <section>
            <h1>Website Design System</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore, ab!</p>
        </section>
    </header>

In this code i want to create the header of the page, with a banner, a title, a paragraph and a navigation bar. With this practise i’m getting some structurized problems so i want to detach the nav element from the header element.

Is it for a structure ‘allowed’ or good practise to put the nav element outside of the header like this:

    <nav>
      <!-- unordered list to create the navigation bar (and logo?) -->
    </nav>
    <header>
        <section>
            <h1>Website Design System</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore, ab!</p>
        </section>
    </header>

Can i also put the logo of the website inside the nav element? What is the best practise for this structure?

I would like to hear you guys thoughts,

Kind regards,

Youri

Hi there,

I think it comes down to personal preference.

For me, I like to keep the <header> and <nav> together. If I want a banner, I’ll dedicate a section to it with a class.

<header>
    <nav></nav>
</header>
<section class="banner"></section>

Now, as for the logo inside the <nav>? I don’t see why not. I imagine it would be preferred to hyperlink the logo to the homepage, though, as <nav> is supposed to provide navigation links to different pages.

Hi,

Thank you for your reply. Never thought about your solution.

I’ve been checking the MDN and here is a quick summary of what i found:

The <header> element defines a banner landmark when its context is the <body> element. The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.

It’s a bit confusing.

I think i prefer using the nav element outside of the header. I think it also depends on what kind of website you’re going to build.