Should I Use <Ul>S and <Li>S Inside My <Nav>S

Should I use uls and lis inside my navs?

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.

Should we put ul tag inside nav tag?

In general it's not required, however it's very common practice to put your navigation items in list and using CSS displaying them inline (if required). That is not only advice for HTML5 - if you'll disable for an example CSS in the browser, your menu will be displayed as:

start about me contact (can you read this?)

with list it will be:

start
about me
contact

Consider yourself which version would you like to see in case of problems with displaying design.

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 I be using nav or ul

Don't get confuses with <nav> and <ul>. They both can be used together for a navigation menu.

Nav is an HTML5 tag. If you are creating something in HTML5 you can use <nav> as there is no restriction, but not all browser will render this correctly.

 <nav>
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</nav>

Read about Html 5

Ul creates an unordered list. Unordered means the items in the list will not be in any particular order. You can nest an ul element inside nav to place your links.

Read more about the HTML tags and how they work here.

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

This will create a navigation bar you have to put some CSS styles to look it better.

The above both code will produce the same result. The only difference is that nav tells the browser that this element is for navigation purpose s.

Shoud I prefer navullia-or-other-tag or nava-or-other-tag, from an accessibility standpoint?

The answer is straight forward, semantics and accessibility.

If I arrive at your second example without the <ul> with a screen reader then I have no idea how many links there are.

If I arrive at the first, correctly marked up example with a screen reader I will hear something similar to "navigation landmark, list of 3 items".

This lets me know that there are 3 links in the list so I can visualise where I am in the navigation as I move between them.

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

Should I Use <Ul>S and <Li>S Inside My <Nav>S