CODEWITHSUNDEEP
cssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152787

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

Why do we always use <ul> to make navigation why not <ol>? While we can use both technically.

Upvotes: 18

Views: 5931

Answers (8)

Flavio Mauri
Flavio Mauri

Reputation: 1

The reason why, is probably because coders have come up with this solution without supervision and discussion with semantics experts, it's been built into frameworks etc and it's become a standard de facto.

I think it's a fallacious logic the one exposed from most of the comments, everybody says: the order of the menu items don't matter... but it does.

Menus are carefully built by information architects and content managers. You wouldn't put an "about" before "portfolio", and go tell any retailer that they can swap around the order of their product categories without affecting their sales no problem.

This really sound like ordered lists to me, and I think is the correct tag in most cases.

Upvotes: 0

erenon
erenon

Reputation: 19128

If the order of your menu is semantically important — if, for example, it’s logical that tags comes after questions, then users and badges — then you should use <ol> instead of an unordered list.

Upvotes: 11

Paul D. Waite
Paul D. Waite

Reputation: 98866

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.

Upvotes: 14

Anne Schuessler
Anne Schuessler

Reputation: 1702

I think this is a classic example of why you should separate style from content. As Developer Art, if you don't care about semantic markup, then you can use either one or the other or something completely different at all.

<ul> and <ol> will be rendered differently as a default, with ordered lists numbered (or with letters) indicating the order and unordered lists with bullets or something similar. However, since I assume that about every web page uses styling, this doesn't necessarily matter.

I'd use ordered lists when the order is actually important for the content. Table of contents, enumerations, or any lists where the order is important for the content represented are examples. For most everything else I use unordered lists. (So, you could say that I always use unordered lists unless I have a good reason to use an ordered list.)

Though navigation items do have an order, this is more a visual thing of how navigation is represented and thus can be most easily achieved by using a simple unordered list and appropriate styling. I do not think that navigation items do have an order based on the content. I would argue that although the order is also important for navigation, it's not that important content-wise.

After all, it's a matter of how you see the content and shouldn't make that much difference when it comes to the actual implementation.

Upvotes: 6

knittl
knittl

Reputation: 265585

why do we use <strong> when we can use <em>? (they look differently by default, but that's another story. ol and ul also have different bullets/numbers by default)

navigation items are usually without any specific order, and thus an unorderd list <ul> is used instead of an ordered one <ol>

Upvotes: 4

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

It's not a strict rule - if the navigation imposes order (e.g. registration steps), you can safely use an ol.

Upvotes: 4

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

well, maybe you always do it, but "we" doesn't mean anything here.

It depends if your list is ORDERED or UNORDERED. That's all.

Upvotes: 2

user151323
user151323

Reputation:

Because semantically ul makes more sense if you don't care about the order of menu items.

If you need items to be somehow numbered or when the order has meaning, then we use ol.

If you're not interested in semantic markup but only in appearance, you can use either. Or even neither, use divs and spans and anything else to achieve the needed appearance.

Upvotes: 5

Related Questions