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

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.