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:
- 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>
- Lists provide additional elements for CSS hooks and styling.
- 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?
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well