Why do we always use <ul>
to make navigation why not <ol>
? While we can use both technically.
In the past, nav was used to “contain” a list of navigation links. Now the nav element exists and, by definition, groups the links. So the ul is unnecessary.
The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists ( dl ) are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup.
The <ul> tag is used to create an unordered list. It is used to make a list in those situations where the ordering of list items is not significant. On the other hand, the <ol> tag is to create an ordered list. As the name implies, it is used in those situations where list items are maintained order-wise.
Definition and Usage The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. Tip: Use CSS to style lists. Tip: For ordered lists, use the <ol> tag.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With