When to Use Ul or Ol in HTML

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 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 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.

Should ol/ul be inside p or outside?

The short answer is that ol elements are not legally allowed inside p elements.

To see why, let's go to the spec! If you can get comfortable with the HTML spec, it will answer many of your questions and curiosities. You want to know if an ol can live inside a p. So…

4.5.1 The p element:
Categories: Flow content, Palpable content.

Content model: Phrasing content.

4.5.5 The ol element:
Categories: Flow content.

Content model: Zero or more li and script-supporting elements.

The first part says that p elements can only contain phrasing content (which are “inline” elements like span and strong).

The second part says ols are flow content (“block” elements like p and div). So they can't be used inside a p.

ols and other flow content can be used in in some other elements like div:

4.5.13 The div element:
Categories: Flow content, Palpable content.

Content model: Flow content.

HTML and CSS: What do the ul and li tags stand for?

They target <ul> and <li> elements in the page.

In CSS an id is prefixed by #, a class is prefixed by ., and an element has no prefix at all.

So the selector .sf-menu li:hover ul will apply to any <ul> element, inside an <li> element that you are currently pointing at, inside an element with class="sf-menu".

The selector .sf-menu li.sfHover ul will apply to any <ul> element, inside an <li> element with class="sfHover", inside an element with class="sf-menu".