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

Question

I'm not sure why I need to use ul-li vs simply using divs when listing items. I can make both look exactly the same so where is the functional advantage to creating an unordered list vs lining up divs?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

another thing about ul li is ; you can use ul as a container which helps you to set Style class

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

I like this pattern when i use ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Of course it depends on how we want to use it and how we like it. This is the way i like

Hope helps Thanks

Answer 5

If you use div instead, lynx won't be able to render the page in a readable fashion.

Answer 6

I personally like li's for the semantics. When viewing the source you immediately see that you have a list of something if they are wrapped by an li. A div collection provides no semantic meaning, and usually the only semantics to the list are introduced by the css classes like "listItem". Which obviously points to the fact that an li should have been used in the first place.

If you have a loop in your presentation logic, I always favour a li over a div.

Answer 7

<li> means an item in a list and that lets parsers (browsers, search engines, spiders) know that you're listing items. You can use DIV instead of LI but those parsers would never know that those items are being listed and DIV does not really describe anything except that it's a block.

Answer 8

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 give a sh*t about blind people, consider this: Google, Yahoo, MSN and Co. don't have eyes, they don't "look" at your rendered CSS.

Answer 9

Using <li> (where appropriate) reduces the <div> tag soup you so often see in web pages, which helps developers out a lot.

Not that <div>'s are bad, but whenever a tag gets overused (as <div> often is), it dilutes the semantic meaning of the tag to the point of being totally useless. I learnt this recently from a contractor we hired to help with the CSS/UI of our web app, and the difference it has made to the readability/maintainability of the HTML code is very noticeable to me.

Answer 10

If all you care about is getting lists to look a certain way with minimum effort, then this is a no-brainer already: <li> is one character less to type than <div> and its closing tag is optional in HTML.

And that's in addition to what everyone else said about semantics.

Answer 11

For rendering properly on primitive browsers or mobile devices

Answer 12

I'll agree with much of the comments regarding using ul/lis here, but there is question that div tags offer much greater consistency in appearance than ul/li does.

I can't tell you the countless hours I've spent trying to get ul/li to look exactly the same in Firefox/IE/Safari.

Answer 13

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.