Grow your CSS skills. Land your dream job.

what is the big difference

  • # May 29, 2008 at 1:07 am

    I see people using a ul tag all the time for navigation. What is the difference between an ul tag and a ol tag. I know that the ol tag gives you a numbered list. So does it just come down to preference or is there a big difference in the two?

    box
    # May 29, 2008 at 4:00 am

    the main difference is a semantic one. An ordered list <ol> is for a list that you want to be or believe should be in a specific order – steps in a tutorial perhaps? An unordered list <ul> is one that isn’t necessarily required to be a particular order – a navigation system etc.

    # May 29, 2008 at 10:45 am

    By default, a <ul> (unordered list) gives you a list of bullet points; an <ol> (ordered list) gives you a numbered list. But for a navigation menu, there’s no difference because you usually specify "list-style-type: none;" which gets rid of the bullets/numbers anyway.

    # May 29, 2008 at 11:16 am

    I just think it would be weird to see 1. 2. 3. etc. in a navigation list with the CSS off. Other than that, no difference.

    box
    # May 30, 2008 at 7:29 pm

    hmmmm, you seem to have missed my point – that there IS a difference. The type of list, ol or ul, pertains to the function of the specified list – its meaning. You cannot simply think of these different list-types in purely visual terms. Whatever is tweaked using CSS will make no difference to a screen reader, or a google bot etc, so you should take care to place the right kind of content in its appropriate tag.

    # May 30, 2008 at 8:48 pm

    Wow. That’s some good feedback on this question. As I learn more about web design I am learning that it goes deeper than one would think. When you start planning your website for screen readers you know you are putting some detail into the site.
    Thanks for the responses. It was helpfull

    # June 4, 2008 at 10:39 am

    Maybe an ordered list could be useful if correspondent accesskeys were set for the navigation items… but in "usual" scenarios, I’d stick with box’s reply. :)

    # June 6, 2008 at 8:45 am
    "Flavia" wrote:
    Maybe an ordered list could be useful if correspondent accesskeys were set for the navigation items… but in "usual" scenarios, I’d stick with box’s reply. :)

    That’s the exact reason why I’d use ol for my navigation. Then again you’d need to use the same accesskeys when modifying the menu. So if you’d add another element, it would need to be the last (bottom of list). Then it wouldn’t lose accesskey consistency. For regular users, the list items could be rearranged by CSS.

    box
    # June 6, 2008 at 9:17 am

    But navigation is non-linear, so surely ul is more semantic?

    # June 9, 2008 at 8:49 am

    Absolutely, but it could be linear too. For instance, if you’d use a list-navigation on a check out-process on a webshop. Or a user registration pages that’s really long and should be split up.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".