Should Navigation Be Defined in Lists?

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:

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?

Frequently Asked Questions about Navigation Lists in HTML

What is the purpose of the nav element in HTML?

The nav element in HTML is used to define a section of a page that contains navigation links. These links can be internal, leading to different sections of the same page, or external, leading to different pages or websites. The nav element helps to improve the accessibility and semantic structure of your web pages, making it easier for users and search engines to understand the content and structure of your website.

How do I use the nav element in HTML?

To use the nav element in HTML, you simply wrap your navigation links within the opening

tags. For example:

<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
</nav>

This code creates a navigation bar with links to “Section 1” and “Section 2” on the same page.

Can I use multiple nav elements on the same page?

Yes, you can use multiple nav elements on the same page. Each nav element should contain a distinct set of navigation links. For example, you might have one nav element for the main site navigation, another for a sidebar menu, and another for the footer links.

Are navigation lists necessary in every website?

While not every website requires a navigation list, they are highly recommended for most sites. Navigation lists provide a clear, organized way for users to navigate your site, improving usability and user experience. They also help search engines understand the structure and content of your site, which can improve your site’s search engine ranking.

What is the difference between the nav element and other list elements in HTML?

The main difference between the nav element and other list elements in HTML is their purpose. The nav element is specifically designed for navigation links, while other list elements, like ul and ol, are used to create general lists of items. While you can use list elements within a nav element to organize your navigation links, they are not required.

Can I style the nav element with CSS?

Yes, you can style the nav element with CSS just like any other HTML element. You can change the background color, font size, font color, layout, and more to create a custom look for your navigation bar.

Can I use the nav element for dropdown menus?

Yes, you can use the nav element in combination with other HTML elements and CSS to create dropdown menus. However, creating dropdown menus can be complex and requires a good understanding of HTML, CSS, and sometimes JavaScript.

How does the nav element improve accessibility?

The nav element improves accessibility by providing a semantic way to identify the navigation sections of a web page. This helps screen readers and other assistive technologies understand the structure of the page, making it easier for users with disabilities to navigate your site.

Can I use the nav element in HTML5?

Yes, the nav element is a part of HTML5 and is fully supported in all modern web browsers. However, for older browsers that do not support HTML5, you may need to use a JavaScript library or a polyfill to ensure that the nav element is recognized and styled correctly.

What happens if I don’t use the nav element for my navigation links?

If you don’t use the nav element for your navigation links, your website will still work, but you will lose the semantic and accessibility benefits that the nav element provides. This could make your site harder to navigate for users with disabilities and could potentially impact your site’s search engine ranking.