berserklord Posted August 14, 2011 Share Posted August 14, 2011 Most tutorials for navigation lists use an unordered list. My question is: isn't it much easier to create a navigation list without an unordered list?For example, this here's the code for a navigation list used by the W3Schools CSS Tutorial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">#navlist{position:relative;}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}#navlist li, #navlist a{height:44px;display:block;}#home{left:0px;width:46px;}#home{background:url('img_navsprites.gif') 0 0;}#prev{left:63px;width:43px;}#prev{background:url('img_navsprites.gif') -47px 0;}#next{left:129px;width:43px;}#next{background:url('img_navsprites.gif') -91px 0;}</style></head><body><ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li></ul></body></html> This code here privodes a navigation list with the same look but without a list, with less styling and without positioning: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">#navlist{margin-left:-8px;}#navlist a{height:44px;display:inline-block;margin:8px;}#home{width:46px;}#home{background:url('img_navsprites.gif') 0 0;}#prev{width:43px;}#prev{background:url('img_navsprites.gif') -47px 0;}#next{width:43px;}#next{background:url('img_navsprites.gif') -91px 0;}</style></head><body><div id="navlist"> <a id="home" href="default.asp"></a> <a id="prev" href="css_intro.asp"></a> <a id="next" href="css_syntax.asp"></a></div></body></html> As mentioned before, I can't understand why every tutorial I find on this topic uses lists to achieve results although it's more work this way.Thanks in advance! Link to comment Share on other sites More sharing options...
jeffman Posted August 14, 2011 Share Posted August 14, 2011 With a simple menu like that, there isn't much difference in terms of the actual structure or presentation.The use of list elements became especially popular for drop-down and fly-out menus, because the parent-child relationships create an automatic structure to apply CSS to. But there is no reason it can't also be duplicated using other elements.The real benefit of lists is more philosophical than anything. The "new" web is semantic. That is, elements should have meaning. As a container, a div means nothing. But a list, obviously, is a list. When you organize a nav menu as a list of links, calling it a list means you're calling it what it is. If doing that is not valuable to you, then I suppose you aren't interested in the philosophy that underlies the new web. That's an observation, not a judgment.There are practical benefits to organizing a page semantically, but you probably won't see them in a typical browser. Browsers for users with disabilities, on the other hand, do treat elements differently based on semantics, and this trend will increase as the web gets more and more accessible. Some browsers that you may not be aware of don't use CSS at all. They are interested in content only. Providing semantic hints helps them to organize the content in a meaningful way. Bots are the most common example. Link to comment Share on other sites More sharing options...
berserklord Posted August 14, 2011 Author Share Posted August 14, 2011 Thanks for the answer!Your observation is right, efficiency is more important from my point of view than philosophy, but as you already stated, there isn't really that much of a difference.Anyways, if there are benefits to be gained from organizing a page like that, it think I'll use lists after all. Link to comment Share on other sites More sharing options...
ste Posted August 14, 2011 Share Posted August 14, 2011 These questions about semantics come up quite often. In my opinion, accessibility should be a concern for all developers. If you ever test a page with a screen reader you can see the difference between poorly coded pages and well written, semantically correct pages. Considering the many visual impaired people who use the internet, it's important and apart from that It's good for search engine optimisation.A sites navigation is essentially a group of links and as such they should be grouped together. A list is really ideal for this. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.