Why are <li>s better than <div>s for making tabs?

I just overhauled the HTML and CSS for a project I joined mid-way through. I'm not a CSS expert, but I have worked with some, so I know the preferred method of making navigation tabs is to use <li>s rather than <div>s, so I changed this. The thing is, if somebody asks me *why* it's better, I'm not sure I can tell them. Why is it?

 

Well. A navigation bar is essentially a list.. So why not?
Also if you do like.

<ul>
<li></li>
<li>
    <ul>
         <li>
         <li>
    </ul>
</li>
</ul>

HTML:

With multiple layers. It is easier to style multiple <li>'s than setting a classes or something for each div individually.

 

Semantics. Since a menu is a list of links from an html standpoint, not CSS, it is better for semantics. It's also better for persons with disabilities using screen readers...

 

As above but I would also agree that it's more flexible from a CSS standpoint as you can easily create sliding-doors, dropdowns, hovers etc with this struture.

 

It's better for semantics and it's more flexible when you're dealing with more complex menus such as multiple levels of nested menus. As stated above you can also do dropdowns more easily no matter how many layers of nested menus you have.

 

It also gives you an SEO advantage

 

Those are great answers, thanks all.

 

Divs are block elements that should be used sparingly. Divitis is bad coding practice that makes future changes more difficult. Using lists allow for better readability from both people and servers and works well with third party frameworks like jquery.

 

I've heard this argument over and over again . How much of the current Internet population uses such programs and what's the potential profit ? To me it seems just like waste of loading speed and coding time when we do that .

 

I'm really learning a lot on this thread. I personally always preferred divs, as I felt they were more versatile and I was able to minimize the amount of different tags I had in my code. But the dropdown and SEO issues really give me pause for thought...

 

Strange argument. jQuery does not care about div or li ... if I pass an id or class to jQuery it does what I want.

It's all about CSS. Better readabilty if it's li instead of div? LOL

 

I'm sure there's more important factors to worry about in relation to coding time/loading speed than making your page that bit more accessible.

 

For BLIND PEOPLE, sorry = Visually Impaired.... Yes it's a small portion of the population, but in providing better semantics you also apply principles to the ADA here in the U.S. which has nothing to do with profit and everything to do with making things work better for the disabled.....

Cheers!~

 

I learned a lot here. I always used ul's and li's for my navigation's because it looks much cleaner div's, and I usually have my ULs and LIs float left by default.

 

Whit the brutal and unscrupulous competition we're facing I would be surprised to see if everyone took their time to add this feature to each and every page . Personally I believe that far better job is done if I just donate a part of my profits to charity but then again who knows what is the best path to take .

 

<div> s are considered as structural tags where as <li> are list tags. When you place any content in <div>, the semantics goes as expecting normal content in it. But when you place in <li> semantics expect to get more than one list of items in the following content. Also this is helpful for assistive technologies which are used by people with disabilities which tell them at the beginning of any <ul> that there is a list of n items and users can have a clear idea what is upcoming.

 

Semantic coding practices, in itself, have nothing to do primarily with disabled persons.... In todays' competition it should be taken more so for compliance and search engine optimization first. The benefit of semantics is that by default, using them properly ALSO helps those using devices that assist them such as screen readers.

So "adding this to each and every page" isn't for the disabled persons as much as it's for your site or your clients' site(s).

In todays' competing climate, it holds true that you are only as good as your site is!!! That goes for

- appearance ui/ux
- proper coding ( semantics / optimization )
- content ( optimized )

IN NO PARTICULAR ORDER => but without those 3 items, you will get NOWHERE...

But knowing that you are in compliance with the ADA ( for those in the U.S. ) only adds to the consumer confidence factor that "you are doing your part" to help others...... In this "evil" world, as some like to call, a little extra nice nice can go a long way!!

Cheers!~

 

This is a great thread, I learned a few things.

I was taught to use LI's from the start, and I never really questioned it because of how it was explained to me, as being a list of links.

 

This would seem to me an argument as why to use divs, no? Using a tag where certain content is "expected" would have more potential of messing things up when the tag doesnt get exactly what it expects, I'd think.

 

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.