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?

Terrify

Brilliant question. I have been searching for this for a while. I hope there is some reasonable answer below. – Anglophobia

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.

Executant

+1. For the visually impaired, it can be helpful to distinguish what's in a list and what's not. Say if you have a list of ingredients in a recipe for example, and the user wants to skip to the instructions or just read the list, you need a list. – Kovacev

+1. zsharp: You say so yourself, "when listing items". You list up things when adding them to a list. – Serial

@Arve. My point was to get to the functional difference despite the name "list". Oteherwise I would be following rules i didnt understand. – Terrify

HOWEVER, back in the day (and maybe still), each browser added it's own little formatting to list elements, like spacing, margins, etc, so that is exactly why a lot of people prefer using divs. because no one wants to add a bunch of code to zero out formatting, or to detect browsers, and those slight differences would often break page layouts, doing ugly things like putting white lines between image "slices" and bumping items down below others. – Antibaryon

@Antibaryon Actually, CSS reset projects are Legion precicely because professional front-end devs do want to add a bunch of code to zero out formatting. They "reset" default styles of all the browsers to a known, "styleless", base. – Louella

@Louella sure, I agree that many, possibly most go that route. But there is a growing school of though that uses HTML to just define and label the object graph (tree structure with class names), and actually use CSS classes for ALL the style. Having some html elements have some bits of arbitrary style is not good separation of concerns. You can argue that resets solve that, but many prefer to have all their style expressed in css classes, eg <div class="list-item feature-item"> instead of splitting it half between the element type and class, <li class="feature-item">. – Antibaryon

@Antibaryon Agreed, and I think we are mostly saying the same thing. For e.g. see: meyerweb.com/eric/tools/css/reset This is a very popular, and simple, CSS reset that clears all padding, margins, borders, and list styles to zero/none. – Louella

@Antibaryon - Also worth knowing about here is Normalize (necolas.github.io/normalize.css) – Semitone

You mentioned Google. Funny enough, their code oftentimes is trash that violates both the semantic principle you correctly talk about and even such basic concepts that IDs ("#") in HTML are supposed to be unique. – Grammatical

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.

Coruscate

i used the term "look" to emphasize the point of getting to the underlying difference. Your philosophy is appreciated nonetheless. – Terrify

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.

Mackintosh

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.

Chevrotain

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.

Tufted

Wouldn't a navigation menu be considered a list of pages they can visit, especially if there is a hierarchy? – Edna

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.

Tacye

Answer 7

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

Geller

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.

Alabama

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.

Jacklight

I agree. I actually saw <div class="ul"><div class="li">...</div></div> once and the most coherent thought I could muster was "WTF??!!??!!!?!" – Ireland

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.

Caseinogen

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

Quincuncial

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.

Hilten

Answer 13

For rendering properly on primitive browsers or mobile devices

Cown

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.

Babirusa

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

Hyunhz

div can be used as a container, too – Charlottcharlotta

excuse me @Barbaros does myHebe mean anything? – Disprove