6

I've been developing for a while and often develop sites using menu tabs.

And I can't figure out why so many web developers like using lists < ul >< li > etc rather than just using plain old divs.

I can make menus in divs which are simple and work perfectly in every browser. With lists, I'm usually trying to hack it one way or another to get it work properly.

So my question is simple : why should I use lists to create my menus instead of divs ?

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
Bob
  • 61
  • 1
  • possible duplicate of http://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div – balpha Apr 20 '10 at 10:53

3 Answers3

12

Simple: Semantic HTML. Navigation is essentially a list of links in your HTML, so your markup should reflect this.

It has several benefits, search engine spiders can intelligently figure out what is a list of stuff (ie. your nav) and google specifically does clever things with it.

Also, users with text only browsers or screen readers can instantly recognise navigational elements with ease.

Besides, it's good practice.

dangvy
  • 316
  • 1
  • 11
1

If you take your menu as an example, then menus by nature can be hierarchical, and an HTML list is specifically designed for marking-up a hierarchical list of items. It is the semantically correct mark-up for that type of item and will be easily understood by any type of user-agent whether CSS is enabled or not (think of screen readers, web robots etc.)

There absolutely no reason you should find it harder to style a nested list as a sequence of 'flat' divs. In fact, quite the contrary, since you CSS syntax is designed to easily differentiate nested items.

Dan Diplo
  • 25,076
  • 4
  • 67
  • 89
0

There is no hacking needed with lists, because just setting display: block and clearing a few other styles produces identical behaviour to divs, but the advantages are that search engines, text browsers like Lynx, and so on (all UAs not seeing your CSS) get an idea of what the elements are. It also helps mashups like stumble, feed agregators and generators, and all the other programmes that take data from pages and try to assemble it into something useful.

Basically, divs are redundant (check out http://camendesign.com/ if you don't believe me; no divs, classes, or spans, though using too much HTML5 for a production site).

Nicholas Wilson
  • 9,435
  • 1
  • 41
  • 80