multiple <nav> tags

Html

Html Problem Overview


Can we use multiple

Html Solutions


Solution 1 - Html

Yes, absolutely. You can have multiple header, nav, and footer tags sans penalty.

As long as you're making sure you are using tags semantically and you aren't putting them in invalid places (they're block-level elements, so you can't put them inside an inline element, for example) then you shouldn't worry too much about what the sticklers are saying. It's all to easy to get caught up arguing about tiny details instead of moving forward on your project.

Solution 2 - Html

Yes, having multiple <nav> elements is absolutely ok.

You just have to make sure you're making them distinguishable for people using screen readers. You can do it by labelling each <nav> using aria-label.

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

Or, if one of the <nav> as visible text on screen that can be identified as labelling element, you can use aria-labelledby like follows:

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

You can read more about using Multiple Navigation Landmarks.

Solution 3 - Html

The answer is yes. You can have a <nav> tag in the footer, for more info check mdn <nav> documentation.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionstephenmurdochView Question on Stackoverflow
Solution 1 - HtmlcoreywardView Answer on Stackoverflow
Solution 2 - HtmllucalancaView Answer on Stackoverflow
Solution 3 - Htmlharold ramosView Answer on Stackoverflow