Comments on: The importance of using lists for navigation http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/ Just another WordPress weblog Wed, 17 Mar 2010 02:50:15 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Scott MacDonald http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-4902 Scott MacDonald Fri, 15 Jan 2010 13:10:53 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-4902 I currently have yet to decide whether I personally think lists are really worth it or not. I've found myself making sites both with and without; However your argument of needing extra classes in order to simulate the nesting isn't completely true. You can just as easily add just another div or span within the existing one to create nesting. To style the nested elements you could simply use something like #nav div{...}, which would apply that style to all child divs within the element of #nav, which is still less markup then you would probably use if your were using a list, seeing as you don't have to reset anything. I'd also just like to point out that some of the main points you were stating about having the extra ul and so on making it easier to animate, as well as have child nodes etc, don't apply to all sites, not by a long shot. You're own blog here for example, doesn't use any of these. Personally I think two of your strongest arguments are pretty much negated on a site by site basis... I currently have yet to decide whether I personally think lists are really worth it or not. I’ve found myself making sites both with and without; However your argument of needing extra classes in order to simulate the nesting isn’t completely true. You can just as easily add just another div or span within the existing one to create nesting. To style the nested elements you could simply use something like #nav div{…}, which would apply that style to all child divs within the element of #nav, which is still less markup then you would probably use if your were using a list, seeing as you don’t have to reset anything.

I’d also just like to point out that some of the main points you were stating about having the extra ul and so on making it easier to animate, as well as have child nodes etc, don’t apply to all sites, not by a long shot. You’re own blog here for example, doesn’t use any of these. Personally I think two of your strongest arguments are pretty much negated on a site by site basis…

]]> By: Dustin Brewer http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-4357 Dustin Brewer Mon, 09 Nov 2009 12:48:32 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-4357 John, Thanks again for your feedback on this article. I can see you are passionate about it. You can move a div / anchor group of elements just as easily as you can a nested list but the problem is adding classes to the divs to simulate nesting is unnecessary and a waste of time when a list already does this. I think with links it is important to be able to nest sub navigation without adding various CSS classes that would interfere with the structure vs presentation argument. Thus, as it stands, lists are the most semantic method to organize your site's navigation and style it accordingly without creating a complicated system of classes to nest navigation. John,

Thanks again for your feedback on this article. I can see you are passionate about it.

You can move a div / anchor group of elements just as easily as you can a nested list but the problem is adding classes to the divs to simulate nesting is unnecessary and a waste of time when a list already does this.

I think with links it is important to be able to nest sub navigation without adding various CSS classes that would interfere with the structure vs presentation argument. Thus, as it stands, lists are the most semantic method to organize your site’s navigation and style it accordingly without creating a complicated system of classes to nest navigation.

]]> By: Dustin Brewer http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-4356 Dustin Brewer Mon, 09 Nov 2009 12:44:26 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-4356 John, Thanks for giving your feedback. I think the distinction between people using lists for navigation and divs, etc for layout are two separate things. Let me explain. Lists: Navigation is a list of links, thus, having a list of links with various other nested links mirroring how a site is mapped is the most semantic method available for creating site navigation in XHTML. Tables: Separation of structure vs presentation. With tables, you are limited on how you can present a website using a table without the site easily getting out of hand with a dozen tables nested in another dozen tables. Using divs and other "semantic" elements allows the site to be styled with CSS and simply grouping elements in a logical fashion. I agree that XHTML isn't currently the ideal semantic markup language, but HTML5 is moving towards having more semantic, contextual, markup. John,

Thanks for giving your feedback. I think the distinction between people using lists for navigation and divs, etc for layout are two separate things. Let me explain.

Lists: Navigation is a list of links, thus, having a list of links with various other nested links mirroring how a site is mapped is the most semantic method available for creating site navigation in XHTML.

Tables: Separation of structure vs presentation. With tables, you are limited on how you can present a website using a table without the site easily getting out of hand with a dozen tables nested in another dozen tables. Using divs and other “semantic” elements allows the site to be styled with CSS and simply grouping elements in a logical fashion. I agree that XHTML isn’t currently the ideal semantic markup language, but HTML5 is moving towards having more semantic, contextual, markup.

]]> By: John http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-4355 John Mon, 09 Nov 2009 09:54:25 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-4355 The author wrote: "Not being able to grab on to any tags to style out navigation but a link would hamper the ability to make a decent site and make it especially difficult for the site to be redesigned using the same markup. Which is the whole point of the CSS movement, separation of structure and presentation (design)." This is nonsense. A "navigation group" can be moved and styled with the same ease whether it's a <a>link</a> or <a>link</a>. The div group here makes it especially difficult for the site to be redesigned? How? They both do exactly the same thing! The author wrote: "Not only do we lose the ability to style the navigation but we are also losing the ability for sub-navigation. This kind of functions on a very small site but when it comes to larger sites it simply doesn’t work. You don’t want to attach a class to each link to “fake sub-navigation” because that is just ridiculous." Wrong, wrong, wrong again. You don't lose the ability to style the navigation. Maybe you just don't know what you're doing. <a>link</a> and <a>link</a> are identical in effect once the CSS is in there. The only difference before that is that the list group is pre-formatted and the div group is not. The pre-formatting of the list tags requires the addition of more CSS in order to override the pre-formatting. If you are displaying all the elements as a block, then <a>link</a> would give you an effect similar to the list, if the navigation really needed to be that complicated. And why is it ridiculous to use the div method for sub-navigation? It's almost identical again, and why does the size of a site make a difference? Sorry, but a lot of the statements in your article are just preposterous. The author wrote: “Not being able to grab on to any tags to style out navigation but a link would hamper the ability to make a decent site and make it especially difficult for the site to be redesigned using the same markup. Which is the whole point of the CSS movement, separation of structure and presentation (design).”

This is nonsense. A “navigation group” can be moved and styled with the same ease whether it’s a link or link. The div group here makes it especially difficult for the site to be redesigned? How? They both do exactly the same thing!

The author wrote: “Not only do we lose the ability to style the navigation but we are also losing the ability for sub-navigation. This kind of functions on a very small site but when it comes to larger sites it simply doesn’t work. You don’t want to attach a class to each link to “fake sub-navigation” because that is just ridiculous.”

Wrong, wrong, wrong again. You don’t lose the ability to style the navigation. Maybe you just don’t know what you’re doing. link and link are identical in effect once the CSS is in there. The only difference before that is that the list group is pre-formatted and the div group is not. The pre-formatting of the list tags requires the addition of more CSS in order to override the pre-formatting. If you are displaying all the elements as a block, then link would give you an effect similar to the list, if the navigation really needed to be that complicated. And why is it ridiculous to use the div method for sub-navigation? It’s almost identical again, and why does the size of a site make a difference? Sorry, but a lot of the statements in your article are just preposterous.

]]> By: John http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-4354 John Mon, 09 Nov 2009 09:25:08 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-4354 You "semantic fanatics" never cease to make my eyes roll in disbelief. It's almost unbelievable how you guys can tell others not to use a table for layout purposes because "tables were made for tabular data" and that a layout is not what a table was intended for, and then in the same breath, you preach (from the infallible imaginary book of semantics) that lists should be used for navigation, even though their intended use was for, um, lists. That would be a list of items in your content. A navigation is not part of a site's content. If you can say that, hey, a navigation is a list, too, then why can't someone else say that a website is like a table with columns and rows (which it is)? You can't have your cake and eat it, too, fellas. You “semantic fanatics” never cease to make my eyes roll in disbelief. It’s almost unbelievable how you guys can tell others not to use a table for layout purposes because “tables were made for tabular data” and that a layout is not what a table was intended for, and then in the same breath, you preach (from the infallible imaginary book of semantics) that lists should be used for navigation, even though their intended use was for, um, lists. That would be a list of items in your content. A navigation is not part of a site’s content. If you can say that, hey, a navigation is a list, too, then why can’t someone else say that a website is like a table with columns and rows (which it is)? You can’t have your cake and eat it, too, fellas.

]]> By: Anja http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-2812 Anja Tue, 28 Oct 2008 11:08:32 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-2812 Good words. Good words.

]]> By: Totonet http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-2671 Totonet Fri, 04 Jul 2008 04:30:59 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-2671 Nice post. i'm convinced that css is the best way to improve a site accessibility. some one know whwre i can get a great tutorial? Thanks for sharing. Nice post. i’m convinced that css is the best way to improve a site accessibility. some one know whwre i can get a great tutorial? Thanks for sharing.

]]> By: BlueBoden http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-2662 BlueBoden Tue, 01 Jul 2008 01:55:03 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-2662 It also allows for richer styling, there simply isn't any good reasons not to use lists for navigation. It also allows for richer styling, there simply isn’t any good reasons not to use lists for navigation.

]]> By: Dick C. Flatline http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-742 Dick C. Flatline Thu, 27 Dec 2007 01:13:43 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-742 No, man, you should, like, use LINKS for navigation, man. Freakin' little-enders and big-enders, every concept in their pea-sized brains starts with "You should..." Please, Dear God, send the Planetkiller *now*! No, man, you should, like, use LINKS for navigation, man. Freakin’ little-enders and big-enders, every concept in their pea-sized brains starts with “You should…”

Please, Dear God, send the Planetkiller *now*!

]]> By: Dream In Code http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/comment-page-1/#comment-739 Dream In Code Wed, 26 Dec 2007 22:23:18 +0000 http://dustinbrewer.com/the-importance-of-using-lists-for-navigation/#comment-739 I recently started using lists for all my navigation and have found it to be so much easier and cleaner. Wouldn't go back to using anything else if you paid me.... ok... maybe if you paid me. I recently started using lists for all my navigation and have found it to be so much easier and cleaner. Wouldn’t go back to using anything else if you paid me…. ok… maybe if you paid me.

]]>