multiple <nav> tags

Question

Can we use multiple tags on the same page in html5?

I've read this article on Zeldman.com but it's not entirely clear to me

i.e.

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

Mornings

Role='main' is for identifying the main content of your site w3.org/TR/wai-aria/roles#main , and there is not a role for blogroll. I think you mean to be using microdata - schema.org . – Dunlap

Answer 1

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.

Those

How about multiple nav in the same footer? – Sandhi

@Sandhi Completely valid, especially if you're using it in a way that represents the structure of the content and not merely for the convenience of styling. – Those

Is there any guidance on what standard labels should be used for types of navigation? Specifically: main navigation, subnavigation, utility navigation (e.g. quick links) and footer navigation? Also, if <nav> is already inside of a <footer> tag, is it redundant to then apply aria-label="footer navigation"? – Unleash

@chunk_split I think you'd be better asking a new question, although I'm not sure StackOverflow is the right community. As for ARIA attributes, it's safe to add them even if they seem redundant. – Those

Answer 2

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.

Oidium

Answer 3

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

Mesics

Good job providing an authoritative link. The linked page, in its Usage Notes, specifically states "a document may have several <nav> elements". – Endora