Blogs

Should Navigation Be Defined in Lists?

Craig Buckler
Share

An interesting article has been posted on Chris Coyer’s CSS-Tricks: Navigation in Lists: To Be or Not To Be. The article provoked a plethora of comments and debate. Here’s a summary…

When faced with creating a navigation menu, most web developers will implement code such as:

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

Those who haven’t emigrated from HTML4 land will omit the <nav> and use <ul id="nav"> or similar.

The question: are list elements necessary?
Naked links are leaner and cleaner…

<nav>
	<a href="#">Home</a>
	<a href="#">Products</a>
	<a href="#">Services</a>
	<a href="#">About Us</a>
	<a href="#">Contact Us</a>
</nav>

Prior to HTML5, lists were required:

  • older browsers could struggle styling inline elements
  • adjacent links could cause accessibility issues in screen readers, and
  • you had to place navigation in something — lists were a good option.

These issues mostly disappear with the introduction of the HTML5 <nav> element. Superfluous list elements are unnecessary because the browser/screen readers understands that it’s a navigation block and can process links accordingly.

That said, there are a number of good reasons to retain lists:

  1. Hierarchical menus and sub-menus can be defined. There’s no reason why other elements couldn’t be used, although there are few benefits, e.g. 
    <nav>
	<h1>Main Menu</h1>
	<a href="#">Home</a>
	<a href="#">Products</a>
	<section>
		<h2>Product Menu</h2>
		<a href="#">Product One</a>
		<a href="#">Product Two</a>
	</section>
	<a href="#">Services</a>
</nav>
  2. Lists provide additional elements for CSS hooks and styling.
  3. Lists are a widely adopted technique which developers know and expect.

Navigation lists have become ingrained as the definitive technique. Few of us consider listless navigation; it feels wrong — but is it? It will depend on the circumstances and it’s easy to get bogged down in semantic squabbles, but I suspect Chris is correct: lists are often unnecessary.

I’m going to attempt naked link navigation in my next project. Will you?