# Issue #22: unordered lists in main navigations

Issue #22: unordered lists in main navigations

Last year I wrote an article for web.dev called “Building the main navigation for a website”. One solution I propose looks like this:

<nav aria-label="Main">
<ul>
<li><a href="/home">Home</a></li>
<li><a aria-current="page" href="/products">Products</a></li>
<li><a href="/team">Team</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>

Several people have asked me: “Why do you use an unordered list instead of an ordered list? The items are in a particular order!”. My ad hoc answer was usually, “Because it doesn’t really make a difference.” This week I thought a little more about it.

ordered vs. unordered lists

The order of items in a navigation is usually not random. We put a lot of thought into the decision of which items we add to our list of most important pages and we place them specifically. We put the most relevant items at the beginning or end of the list. This means that the order matters and consequently it would make sense to use an ordered list. The thing is that from a semantic perspective, the order is only important to us. What matters to the user is that links have meaningful labels and that they can access them quickly.

There is a difference between the significance for us conceptually and for the user semantically. If we change the order of items in the navigation, it doesn’t affect meaning. That’s not always the case. For example, if we’re listing the steps needed to cook a dish in a recipe, the order is important to us and the user. It makes a difference whether they peel and cut an onion first and then put it in the pan or the other way around.

<h1>Onion tart recipe</h1>
<ol>
    <li>Peel the onions.</li>
    <li>Slice them into small pieces.</li>
    <li>Put them in a frying pan with some oil.</li>
    <li>…</li>
</ol>

That being said, it doesn’t make a big difference whether you use an <ol> or <ul> in a main navigation.

I hope that makes sense. If you have something to add or a different opinion, get in touch via email: htmhell@matuzo.at