Forum Moderators: open

Message Too Old, No Replies

ul and li needed for navigation?

         

ericgeneric

6:54 pm on Apr 28, 2005 (gmt 0)

10+ Year Member



seems to create more problems than solve. I have seen that most people use ul and li for nav. is that so it degrades better or what?

thanks,

rich

Craig_F

7:04 pm on Apr 28, 2005 (gmt 0)

10+ Year Member



I guess you could say that. I use it for nav because it is good form -- navigation is a list of items so I code them that way.

That's the main reason, but there are a lot of others that I'll leave for everyone else to fill in.

coolpillows

5:01 am on Apr 29, 2005 (gmt 0)

10+ Year Member



i think the great thing about ul & li is that it works fine w/CSS. i'm just learning how to implement CSS with a nav bar of ul/li combos and it's great. it also illustrates the CSS goal of separating content from presentation.

ronin

10:25 am on Apr 29, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



This goes to the core of understanding what HyperText Markup Language is and what it isn't.

HTML describes (marks up) the role of on-page elements. It doesn't tell the browser how to display them - the browser decides how to do that. An <h1> display default could be 22 pixel arial or it could be 18 pixel Times New Roman. Either way, it doesn't matter... the browser default display is just to give you a very rough skeleton display of your markup - you can have each element display as you wish by styling each element using css.

So, don't worry about how elements display... instead think about the role they play in the document.

In the majority of cases, a navigation list is an unordered list, so it would be correct to mark it up as <ul>...</ul> .

If you style the navigation list as a left-hand vertical menu and then some years later decide to redesign the site with the navigation as a horizontal menu at the top of the page, all you need to do is edit the style instructions in your external stylesheet and though the element remains identically marked up on each page, it will now display differently.