Can you have as many <nav> 's as you want in a HTML 5 document?

Question

I like the new tags from the HTML 5 standard. Can I use them more than once?

Like 3 <nav> tags, or two <sidebar> tags, and can I invent new tags like <fuu> ?

In xhtml I had:

<div class="nav-wrap">
 <div class="nav">
   ...
 </div>
</div>

so I could do something like:

<nav class="wrap">
  <nav>  <!-- can <nav> have <li>'s ? -->
  ...
  </nav>
</nav>

?

Answer 1

The <nav> element is defined in the html5 spec, but the <sidebar> element is not. You can use as many <nav> elements as you'd like (so long as they aren't nested), but the other ones you'd have to provide a DTD and hope that the browser your users use is flexible enough to accept new elements.

I would recommend not defining new elements, and just use the existing semantic elements to create the effects you are after.

<div class="sidebar"></div> is good enough and will be treated as secondary content if you're wrapping your primary content in <main>, which effectively cues the browser into understanding that the region is not a header, footer, or primary content, which on most sites equates to a sidebar.

However, in most cases, the <aside> element is appropriate for use as a sidebar.

Per the spec:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

_{Emphasis mine}