Why We Always Use <Ul> to Make Navigation Why Not <Ol>

Why we always use ul to make Navigation why not ol ?

There isn’t much practical difference between the two.

Using <ol> suggests that it’s important the list remain in the same order. For most navigation on the web, the order of the navigation items doesn’t matter.

An exception would be navigation within a process, e.g. if you’re taking the user through a 3-step purchase process, and are giving them navigation to move to any step. An ordered list would be appropriate there, as the steps come one after the other, e.g.

<ol>
<li>Payment details</li>
<li>Delivery address</li>
<li>Summary</li>
</ol>

Note that in HTML5, you can and should wrap any major navigation block, whether it uses <ul>, <ol> or something else, in the <nav> element.

Why UL and why not OL?

ol implies you want an ordered list, e.g. numbered 1,2,3 or I, II, III. generally for menu navigation you wouldn't want to number your menu items. so instead use a ul and apply CSS to get the layout you want. But often I will use OL e.g. if outputting a numbered list of terms and conditions.

Why are ul commonly used to build website navigation?

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.

Should I use ul s and li s inside my nav s?

the nav element and the list provide different semantical information:

• The nav element communicates that we're dealing with a major navigation block

• The list communicates that the links inside this navigation block form a list of items

At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose.

So yes, having a list inside a nav element does add meaning.

Why should I use UL/LI in my HTML?

It is more semantically correct.

What you have above is an unordered list of languages. You should be using an unordered list of items (UL element with LI elements) to be semantically correct about it.

This also helps screen readers and other technologies that depend on correct semantics to work.

Why do navigation bars in HTML5 as lists?

Hierarchy!

Many navigation menus contain more than one level (often used for drop-down menus), i.e., a hierarchy:

• Home
• Products
  
  
  • Physical products
  • Digital products
• Contact

Without using a ul (with a nested ul), you couldn’t represent this hierarchy in the markup (unless the navigation is complex/long, in which case you could use sub-sections with heading elements).

Your navigation (currently) doesn’t have more than one level? That doesn’t suddenly change its semantics, it’s still the same information structure, just with only one level instead of two or more.

More benefits of lists.

By using a ul, user agents (like screen readers) have the chance to offer features that exploit that structure. For example, screen readers could announce how many items the list has, and offer additional ways to navigate that list (e.g., jump to first/last item).

If only div were used, it could easily happen that users "tab out" of the navigation without noticing that the navigation already ended. By using a ul, it’s very clear where the beginning and where the end is, and that’s especially important for navigation menus, because a navigation entry often only make sense in comparison to all the others (finding the right link for your goal is often only possible by checking all available navigation links and ruling them out).

All this has nothing to do with nav.

The nav element just conveys that this section contains navigation links. Without nav (i.e., pre-HTML5), user agents only knew that there is a list. With nav, user agents know that there is a list + that it’s used for navigation.

Furthermore, nav should of course not always contain a ul, as not all navigations are a list of links. See this nav example in the HTML5 spec:

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

Why we use ul li tags for creating menus, navbars?

We use list markup for menus and navigation bars because it is the most appropriate markup from a "semantic" point of view. The links in a menu or navigation bar constitute a list of similar items. As the HTML 5.2 specification says,

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

A navigation bar or navigation menu is a list of links; other types of menus may be lists of functions in an application. Early version of HTML, e.g. HTML 3.2 even had a menu element:

They [i.e. the DIR and MENU elements] are intended for unordered lists similar to UL elements. User agents are recommended to render DIR elements as multicolumn directory lists, and MENU elements as single column menu lists. In practice, Mosaic and most other user agents have ignored this advice and instead render DIR and MENU in an identical way to UL elements.

dir and menu were deprecated in HTML 4.01; the HTML 4.01 spec says:

We strongly recommend using UL instead of these elements.

In addition to browser support, there is another reason for using ul instead of a non-list element: accessibility. When a screen reader encounters an ul, it can announce the number of items in the list to the user. This is very useful, because it allows the user to decide whether they want to read the entire list or skip it. Announcing the length of a list is not possible when the list markup is replaced with a series of paragraphs or divs.

Why webmasters use `ul/li` instead of `div`s for layout?

As far as I know ul / li is are typography specific tags, intended to format text as a list (while search engines love semantic tags).

They are not. They are semantic elements that say the content is a set of list items where the order is not of particular importance.

My big question here is why Web Masters prefer to use lists solution (ul/li) where is an obvious case of a layout (div) solution

Divs are not related to layout. Layout is the job of CSS. The elements used should be selected based on the semantics they convey, then CSS should be applied to them to give the desired rendering.

A div element is an element of last resort. It has no semantics and should be used when HTML doesn't have an element with appropriate semantics for the content.

Why use lists for navigation menus?

If you think about it a menu is essentially a list of links. So in a way it makes sense to do that. Another benefit of using a structured and semantic tag, such as ol or ul is that a screenreader would understand it better than using a generic tag such as div or span which only define a section of a page, but not its meaning.

However with html5 you would probably want to do it with:

<nav>
  <a>Home</a>
  <a>Page 1</a>
  <a>Page 2</a>
  <a>Page 3</a>
</nav>

---

Edit: I found the following over at css-tricks.com:

"Against" navigation in lists

• At least one screen reader user prefers navigation without lists,
  which was the origin of the original article.
• Simpler markup. nav > a > is easier/less than nav > ul > li > a.
• Divs and spans can be just as good, especially with ARIA roles

---

"For" navigation in lists

• Announcing the number of items in the list can be helpful
• Benefit to structure in non-CSS browsers (Lynx screenshot)
• Long standing pattern that hasn't proven widely to be a big problem
• Lists are a "hook" for screen readers, (e.g. press L for lists) and display heirarchy well
• Safety: nothing can be in lists but list items, not so for nav

---

Draw

• The extra markup can be helpful for styling. I'm calling this a draw because it's true but reaching. I could wrap every div on a
  page in another div and that might be helpful someday for styling.
• You can't use role=navigation on a anyway ("Allowed role values are
  directory, listbox, menu, menubar, tablist, toolbar, tree and
  presentation."). I'm calling this a draw since in either case you
  should wrap navigation in a .
• The "verbosity" of screen readers is a choice. Lists are more verbose, but that can be adjusted.
• VoiceOver treats exactly the same
• The spec doesn't care either way.

_{Remember that the above is only the opinion of the author of the article.}

---

Related Topics