HTML5 multi nav tag best practices

Question

I am trying to write a theme with multi menu at the header, should i use multi nav tag for each of them? Or wrap them all inside a nav tag?

Here is the example codepen.

header-a wrap everything inside nav tag.

header-b wrap menu and the element that between menu inside nav.

header-c wrap menu inside nav by each.

header-d add nav tag inside each bar to wrap everything inside bar.

Which method will be good in this case?

Thank you so much.

Answer 1

I think this is about semantics.

A nav element should wrap items that are part of the same navigation structure.

For example:

<nav id="topNav">
  <ul>
    <li><a>Home</a>
    </li>
    <li><a>About</a>
    </li>
    <li><a>Contact</a>
    </li>
  </ul>
</nav>

<nav id="sideNav">
  <ul>
    <li>Products</li>
    <ul>
      <li><a>Oranges</a>
      </li>
      <li><a>Apples</a>
      </li>
      <li><a>Pears</a>
      </li>
    </ul>
  </ul>
</nav>

<nav id="socialNav">
  <ul>
    <li><a>Facebook</a>
    </li>
    <li><a>Twitter</a>
    </li>
    <li><a>LinkedIn</a>
    </li>
  </ul>
</nav>

See this article

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.