HTML & CSS
Article
By Craig Buckler

Should Navigation Be Defined in Lists?

By Craig Buckler
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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?

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.