To nav or not to nav?

A few weeks back, fellow HTML5 Gallery curator Derek Johnson tweeted the following:

Re-reading the spec and can’t see why some people say nav is only for links within the same site.

As one of the “people” Derek referred to, I was suddenly hit with doubt. So I headed over to the HTML5 specification and sure enough there’s no actual mention that the nav element is only to contain links whose target is within the same site.

How odd I thought.

Specifications

In fact both HTML5 specifications (W3C and WHATWG) say the same thing (thankfully, since having two specs. is bizarre enough as it is without them not matching):

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

… links to other pages or to parts within the page…: nothing here that indicates that the pages need to be within the site.

The specifications also say that:

the element is primarily intended for sections that consist of major navigation blocks

A page can of course have more than one major navigation block, but not all navigation blocks are major. On most pages for example, social links are minor and wouldn’t be contained within a nav.

The specifications also provide some sample uses of the nav element.The first two contain lists of links to pages within the same sample site.

The third example however is the interesting one. It contains all sorts of elements (mainly because it’s underlining the fact that the nav element doesn’t have to contain a list). But what it also contains, is a number of links, two of which are external to the sample page.

So the examples seem to indicate that indeed the nav element can indeed contain links that are outside of the same site.

So I was mislead, from somewhere, from someone, or else I simply got this idea into my head myself and so did many others.

Nav in footer?

The specification also specifies that the nav element is usually not required in a footer element, that the footer element alone is sufficient to contain the navigation links.

Any links in a footer are also unlikely to be main navigation links, as they probably should be elsewhere in the document if so.

Final thoughts

I do however still think that the nav element should only be used to contain the primary navigation of a site. In most cases this will link to internal pages only and there will be only one nav element per page.

HTML5 Doctor Tom Leadbetter pointed out, that for websites like about.me, the main navigation of a person’s profile consists of links to social network profiles, which are of course links external to the site. It would seem apt in this case.

Like all of the new HTML5 elements, nav is going to take a bit of time to get used to in order to ensure it’s being used in the correct place for the correct content.

I guess the end result is that when you’re trying to decide if your links should go within a nav element or not, simply ask yourself if they are the main or primary navigation links of the site.

If so, use nav, if not, don’t.