Skip to main content

Why I Don't Like Lists in Nav Elements

05-25-11 Ryan Buttrey

The nav showdown you never knew you needed. Sparkbox argues the finer points of including (or not including) lists in nav elements.

Is it necessary to use lists inside the HTML5 nav element? We couldn’t figure it out after a bout of armed combat, so we decided to write a pair of articles weighing the pros and cons. Make sure to check out Why I Like Lists in Nav Elements.

Here’s Ryan’s take on why using lists inside nav elements is not necessary.

Let’s start off by looking back to before HTML5 existed. When structuring the markup for the main navigation, it might look something like this:

<div class="main-nav">
  <ul>
    <li><a href="link-one.html" title="Link One">Link One</a></li>
    <li><a href="link-two.html" title="Link Two">Link Two</a></li>
    <li><a href="link-three.html" title="Link Three">Link Three</a></li>
    <li><a href="link-four.html" title="Link Four">Link Four</a></li>
  </ul>
</div>

Fair enough. I think we all pretty much have agreed that is the standard. So when HTML5 came along and added the nav element, naturally markup started looking like this:

<nav>
  <ul>
    <li><a href="link-one.html" title="Link One">Link One</a></li>
    <li><a href="link-two.html" title="Link Two">Link Two</a></li>
    <li><a href="link-three.html" title="Link Three">Link Three</a></li>
    <li><a href="link-four.html" title="Link Four">Link Four</a></li>
  </ul>
</nav>

That, in itself, is not wrong. And certainly there is a case for that (for example, nested navigation). But, it’s not necessary. To make my point a little clearer, first let’s look at the actual 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 list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.”

The HTML 5 specification

In the past, nav was used to “contain” a list of navigation links. Now the nav element exists and, by definition, groups the links. So the ul is unnecessary.

<nav>
  <a href="link-one.html" title="Link One">Link One</a>
  <a href="link-two.html" title="Link Two">Link Two</a>
  <a href="link-three.html" title="Link Three">Link Three</a>
  <a href="link-four.html" title="Link Four">Link Four</a>
</nav>

So Basically...

Is an unordered list necessary? No. Can it be used? Absolutely. Should it be used by default just because that’s how you’ve always done it? Definitely not.

Disagree?

Read Rob Tarr’s thoughts on the same subject and realize I make more sense.

Sparkbox’s Development Capabilities Assessment

Struggle to deliver quality software sustainably for the business? Give your development organization research-backed direction on improving practices. Simply answer a few questions to generate a customized, confidential report addressing your challenges.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development