CODEWITHSUNDEEP
htmlnav
aboutjquery
aboutjquery

Reputation: 922

HTML5 multi nav tag best practices

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.

Upvotes: 4

Views: 6829

Answers (2)

lukehillonline
lukehillonline

Reputation: 2647

It does not seem there is an exact answer to this. Rather, the correct answer depends on how you want the semantics of the website to be read.

Try looking at the following sources:

There is information that states that all 4 of your options would be semantically correct. What you need to think about is how you want the navigation to be interpreted: 1) Should it be seen as one main menu? Then you would want header-a; 2) Should the menus be seen as groups of related menus? Then any of header-a, header-b or header-c would work.

I know I have not exactly given you an answer to your question but from what I can work out there is no straight forward answer.

Hope this helps in some way.

Upvotes: 1

Jamie Barker
Jamie Barker

Reputation: 8246

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.

Upvotes: 7

Related Questions