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

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

Answer 3

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.

Answer 4

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 5

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.

Answer 6

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 7

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

Answer 8

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

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

It depends on the project. I recently did a project that had a menu designed using a list. They wanted to add a bunch of effects, like sliding/fading, and also wanted to make it collapsible with multiple levels.

In this case, DIV's were much more suitable. I was able to create containers for child div's and apply jQuery to achieve the desired effects.

Even if your project doesn't have these requirments yet, it may be prudent to think of how you may change it in the future...

Answer 12

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 13

For rendering properly on primitive browsers or mobile devices

Answer 14

Your question is already answered by i want to add my two cents here. I was working on a project where i was doing the backend logic and my data was being aggregated into a page template made by my designer. he used ul and li tags to represent every kind of list on the page, some of which were widgets. The data was coming from a cms where users could enter rich text via html tags. when users started creating lists in their content the lists no longer looked like bulleted listes rather screwed up the whole page.

lesson learned: do not use list tags with generic css selectors if your content can contain html in itself.

Answer 15

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