1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by anthony.zepezauer, Nov 6, 2010.

  1. #1
    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?
    SEMrush
     
    anthony.zepezauer, Nov 6, 2010 IP
    SEMrush
  2. zzbomb

    zzbomb Peon

    Messages:
    57
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    zzbomb, Nov 6, 2010 IP
  3. workingsmart

    workingsmart Active Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    70
    #3
    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...
     
    workingsmart, Nov 6, 2010 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    wd_2k6, Nov 7, 2010 IP
  5. helloguys12345678

    helloguys12345678 Greenhorn

    Messages:
    50
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    20
    #5
    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.
     
    helloguys12345678, Nov 7, 2010 IP
  6. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #6
    It also gives you an SEO advantage
     
    Rimona, Nov 7, 2010 IP
  7. anthony.zepezauer

    anthony.zepezauer Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Those are great answers, thanks all.
     
    anthony.zepezauer, Nov 9, 2010 IP
  8. CreativeArmory

    CreativeArmory Peon

    Messages:
    44
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    CreativeArmory, Nov 9, 2010 IP
  9. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #9
    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 .
     
    ApocalypseXL, Nov 10, 2010 IP
  10. philst18

    philst18 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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...
     
    philst18, Nov 10, 2010 IP
  11. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #11
    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
     
    CSM, Nov 10, 2010 IP
  12. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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.
     
    wd_2k6, Nov 10, 2010 IP
  13. workingsmart

    workingsmart Active Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    70
    #13
    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!~
     
    Last edited: Nov 10, 2010
    workingsmart, Nov 10, 2010 IP
  14. Dyscrete

    Dyscrete Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #14
    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.
     
    Dyscrete, Nov 10, 2010 IP
  15. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #15
    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 .
     
    ApocalypseXL, Nov 11, 2010 IP
  16. shahilroyhere

    shahilroyhere Well-Known Member

    Messages:
    189
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    130
    #16
    <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.
     
    shahilroyhere, Nov 11, 2010 IP
  17. workingsmart

    workingsmart Active Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    70
    #17
    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!~
     
    workingsmart, Nov 11, 2010 IP
  18. KindSoles

    KindSoles Greenhorn

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #18
    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.
     
    KindSoles, Nov 15, 2010 IP
  19. philst18

    philst18 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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.
     
    philst18, Nov 15, 2010 IP
  20. chainas

    chainas Peon

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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.
     
    chainas, Nov 16, 2010 IP