Why are <ul> commonly used to build website navigation? [closed]

Question

Why are unordered lists commonly used to build website navigation opposed to using ordered lists or simply creating div id's that are placed in an another id element as a group? Maybe its a leftover from previous versions of html/css that I am too young to remember, or maybe a result of increased CSS3 control, but I've always done it this way and never really questioned why:

<ul>
<li><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>

Any insights would be greatly appreciated.

Answer 1

A menu is a list of links.

Since it is a list it should be represented using list markup, and not generic block (div) markup.

From the CSS specification:

Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

Most websites present a list of sections but the order in which you visit them does not matter. This means the order of the list items is not significant so it should be an unordered list of links and not an ordered list of links.

Answer 2

The historical reason (which is what you seem to want) is that, about ten years ago, web standard advocates such as Jeffery Zeldman heavily promoted designing navigation menus that way. I particularly remember reading this article that recommended the style.

One of the big ideas motivating the web standards movement was the separation of presentation from content. So, you would not want to use (X)HTML to control how the menu is rendered. The other main idea was that markup should respect the semantics of the document. That is to say, the markup should mean something in the context of the document. Since a menu is just a list, ul/li was the most obvious choice at the time.