Using UL in place of DIVS - recommended, where to use 1 or the other?

Question

Hi there,

been experimenting with unordered list UL and i have seem varios examples of using them in place of divs..

So i a bit confused, when should i use divs and ul..

for example if i have a 3 column layout then i presume i used divs here, although i can use UL

Also on the right column i have lots of formatting to do, the idea was to place divs with divs with in divs ...

can anyone point out when to use one over the other and are there any browser compatibility issues?

I have seen some sites say that ULs are cleaner than divs, but is this the case?

and also people stating you can build a complete layout with ULs and LIs but you would never do it - why?

I think you see where i am going with this, i am just confused about when to use one over the other.

One example is that in my 3rd column (right) - its a div but inside i need to put a rounded BOX so i was think of putting more divs inside this with corner images?

Any help would be really appreciated

Answer 1

ULs are list elements. So if you have a set of items that are a list, you would use a UL. A good example is a set of menu options - these work well as ULs.

Answer 2

personally, I use divs and spans most places for layout, whereas ul's are used for list of links, menu items, thumbnails, etc.

Answer 3

<DIV> is just a block element that is to be formatted by css. <UL> has an additional semantic property; it tells the browser that you are listing things. This may be important for screen readers, text-only browsers etc.

Answer 4

People tend to use UL instead of DIV when the elements they are styling are more semantically equivalent to lists (for instance, navigation bars or contents pages), especially in the case where the length of the content may change (when you edit the list later). In practical terms there is not much difference, although screen readers and other accessible technologies may have an easier time reading a navigation bar if its a list as opposed to a bunch of divs.

Answer 5

UL stands for unordered list. Use it for lists of items where order is irrelevant.

DIV stands for division. Use it to group items.

ULs are cleaner than divs---IF you're doing a list. A menu is mostly a list of links. A gallery has a list of images. A forum has a list of messages, and a list of users.

RE: rounded corners: There's HTML, and there's more semantical HTML. You could use <div> for anything, and you'd hardly note a difference, but using the proper elements will make it easier to understand (both by you when putting the design together, by screen-scrapers trying to find the proper item in the page, and sufficiently-smart search engines identifying fragments of content and navigation elements).

So, in order to do rounded corners, you should consider wether a corner deserves its own content-free div (which, sadly, due to today's rendering engines, it does), or if you can use a better solution (ie, if the sidebar is a fixed size, you can get by with a single background; if you need it to expand in one dimension, you can use two: a top-aligned ceiling, and a bottom-aligned floor on its own "mobile" div (theorically you could avoid the extra div by modifying the bottom element of the div)).

Answer 6

They are not even close to being identical. A DIV is about as close as you can get to a "clean" element, meaning one that doesn't come with a lot of baggage: padding, margin, etc. To clarify, a DIV acts about the same in Firefox as it does in IE. But a UL (with LI children especially) has different amounts of padding and different behaviors. Try to get the bullets in the LI elements to look the same and you will see what I'm talking about.

One thing that the UL with LI elements is good for, and which hasn't been mentioned here, is to make a wrapping "breadcrumb" trail. You have to set the elements to display inline, but it's a cheap and easy way to get a horizontal flow of boxes without floating a bunch of divs. Yet even here the mileage varies among different browsers. Caveat erector, I guess.