Question

The W3C definition seems a bit vague when it comes to the <nav> tag:

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.

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

Based on a very strict interpretation of their definition and what I’ve encountered through validation, it appears as though <nav> should only contain list elements. However, shouldn’t search be considered a form of navigation within a series of pages?

While I understand that its primary use is for user agents, it still seems rather redundant to have a <nav> preceding a <ul> tag if the former acts only as a container for the latter. It would make more sense if <nav> could contain other elements related to navigation, not limited to a list of links.

For example:

<nav role="navigation">
  <form action="http://google.com/search" method="get">
    <fieldset role="search">
       <input type="hidden" name="q" value="site:mysite.com" />
       <input class="search" type="text" name="q" results="0" placeholder="Search"/>
    </fieldset>
  </form>

  <ul class="top-navigation">
     <li><a href="/">Home</a></li>
     <li><a href="/about.html">About Me</a></li>
     <li><a href="/archive.html">Archives</a></li>
  </ul>
</nav>

Aside from validation, is this not an acceptable use of <nav>? What would the repercussions be for one less concerned with validation, than to ensure screen readers and other accessibility tools can render the page properly?

Answer 1

The nav element should be used for main navigation items of the site, not just all navigation items. It also doesn’t have to contain a ul but since most of the time it does contain a list, it often makes sense, but isn’t essential.

If your search is the main navigtion method of your site, then by all means place it within a nav, although from the example you give above, the list appears to be the main navigation and not your search.

I’ve written a bit about using the nav tag at to nav or not to nav?, although it doesn’t mention a search, which is an interesting observation.