Why should I use 'li' instead of 'div'?

Question

For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better.

Im not sure why i need to use ul-li vs simply using divs when listing items. I can make both look exactly the same

That there is the key word in your question: "look". Can you also make them type the same for blind people using a Braille reader? Can you make them sound the same for blind people using a text-to-speech synthesizer? Can you still make them look the same for visually impaired people using custom client-side CSS user-stylesheets?

That word, "look", is a very dangerous word – when you use that in relation to HTML, all alarms should go off in your head. HTML is a language for describing the semantic structure of a hypermedia document. A semantic structure doesn't have a "look", it's an abstract concept.

Even if you don't care about all this semantic hocuspocus and you don't care about blind people, consider this: Google, Yahoo, MSN and Co. don't have eyes, they don't "look" at your rendered CSS.

By using semantically correct markup, you are embedding extra information in your text. By using ul/li you are communicating to the consuming application that the information is a list, and not just "something" (who knows what) that is some text inside an arbitrary element.

Direct answer to your question: The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."

The term "semantics" refers to the way that you use the inherent meaning of existing structures to create explicit meaning. HTML is comprised of tags that mean certain things by themselves. And there are established rules/guidelines/ways to use them so that your published HTML document conveys what you want it to mean.

If you list something in your document, then add an ordered list (UL) or an unordered list (OL). On the other hand, the page division (DIV) element is used to create a specific & separate piece of content.

The div element "divides." When you look at a page, there are specific parts like a content body, the footer, a header, navigation, menus, forms, etc. And you can use div tags to create these divisions. Often, the page parts correspond with a visual layout, so using explicit page divisions (DIVs) to cut up your layout in CSS is a natural fit. This way the div tags become structural.

If you misuse or overuse the div tag, it can create unintended meaning & code bloat.

To confuse matters: Google uses h3 and div to "divide" their listed search results. ul > li > h3 + div

So when you turn off all styles (Shift+Cmd/Crtl+S in Firefox w/ WebDeveloper toolbar), the divs should go away, and stack naturally. Your naked HTML should still render a nice page with a clear hierarchy: top to bottom, most important content first, and lists with bullets & numbers for listed items. And it's a good idea to add a link near the top (for non-visual users) that allows you to skip down to: main content, important forms or the main headings (like a table of contents).

Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.

There is a lot of talk about using <li> or using <div> but not one comment gave a solid example of the content that goes inside of these tags. My feeling is that <ul> and <li> are not really that important as I cannot tell you the last time that I actually read a "list" of things on a website, newspaper or magazine -- online or in print.

<div> is much more versatile. If you are listing out ingredients for a cake, yes that is a list. If you are listing things out to pack for a hiking trip, yes that is a list.

But what about a user-form of, for example, that lists some random things that are not really a list, nor a series of paragraphs, nor all "headers." Some things are dates, some are checkboxes and some are text. Div it up, if you ask me. A blind person would be mis-informed if it was marked up with <ul> and <li> and they heard "Here is a list of ..." when it is just a hodge-podge of stuff, not really a list.

You should use appropriate tags for the content you want to put inside. This doesn't only mean that ul/li is more appropriate for lists. This also means you have to consider the content of your list and see if its an unordered/ordered or definition list.

Another argument is that when you disable css. The browser will render it's default styling which makes it nicer to look at if alternative browsing devices are used. It also enhances accesibility.