Why I Like Lists in Nav Elements

Ryan and I have been debating the use of lists in the HTML nav element. Read my take on why it's beneficial to use lists.

The question came up recently about the appropriate use of lists in the new HTML5 nav element.

  
    <nav>
      <a href="page1.html">Page 1</a>
      <a href="page2.html">Page 2</a>
      <a href="page3.html">Page 3</a>
      <a href="page4.html">Page 4</a>
    </nav>
  

or

  
    <nav>
      <ul>
        <li>
          <a href="page1.html">Page 1</a>
        </li>
        <li>
          <a href="page2.html">Page 2</a>
        </li>
        <li>
          <a href="page3.html">Page 3</a>
        </li>
        <li>
          <a href="page4.html">Page 4</a>
        </li>
      </ul>
    </nav>
  

But, before we go too far, let's take a look at the definition of the nav element:

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 — only sections that consist of major navigation blocks are appropriate for the nav element. 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, without a nav element.

http://developers.whatwg.org/sections.html#the-nav-element

So, we can all agree that the nav element is for grouping navigation links. Not all links, however, are navigation links. You'll notice that the nav element is for "major navigation blocks." Sitewide navigation, page specific navigation, etc.

Back to the point: what should go inside the nav element?

While putting the anchor tags as children of the nav is definitely shorter, we quickly run into problems when we want to add a submenu. How do you mark it up now?

  
    <nav>
      <a href="page1.html">Page 1</a>
        <a href="subPageA.html">Page A</a>
        <a href="subPageB.html">Page B</a>
      <a href="page2.html">Page 2</a>
      <a href="page3.html">Page 3</a>
      <a href="page4.html">Page 4</a>
    </nav>
  

You can't do it without adding more markup that just doesn't make any sense. If we try to add a submenu to the ul, it feels natural.

  
    <nav>
      <ul>
        <li>
          <a href="page1.html">Page 1</a>
          <ul>
            <li>
              <a href="subPageA.html">Page A</a>
            </li>
            <li>
              <a href="subPageB.html">Page B</a>
            </li>
        </li>
        <li>
          <a href="page2.html">Page 2</a>
        </li>
        <li>
          <a href="page3.html">Page 3</a>
        </li>
        <li>
          <a href="page4.html">Page 4</a>
        </li>
      </ul>
    
  

You now have navigation and sub-navigation with the benefit of inheriting CSS rules and JS if desired. Sure, the ul version is longer, but it's consistent and has the added benefit of providing some extra hooks for styling the navigation elements.

The Bottom Line

If you think you might need sub-navigation at some point, go with the ul version. It will allow you to easily add menus without having to rework your HTML & CSS.

If you want to throw caution to the wind and don't think you'll ever need sub-navigation (i.e. the sidebar for your blog perhaps?), go ahead and just drop those links right in the nav element.

Don't agree with me?

You can can always read what Ryan Buttrey has to say about it. Don't worry, I'll wait for you to come back for the right answer.