Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- Top 10 job boards for freelance web designers
- CSS Trick: Target only IE with an if statement
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- 8 job boards, for freelance web designers, that don't suck
- CSS fix for the double margin float bug in IE6
Categories
The importance of using lists for navigation
Posted on Sunday, December 16th, 2007 under CSS, XHTML, web design news, web standards by Dustin Brewer.It is important to use lists in navigation for semantics, accessibility, aesthetics and flexibility. Not using lists for navigation can lead to confusion, inaccessibility and unclear markup. There has been an article published from a popular CSS tutorial web site that is slightly misleading and generally not the best advice for developers and designers. It appears as though most of the people in the comments noticed right away some of the holes in the attempted “listless navigation” theory. I thought I would address the importance of using lists for navigation here. For some this may be an obvious practice in design but it is important enough to be addressed. I would like to be clear that I mean no disrespect to David Walsh or Chris Coyier, I’m sure they both only had good intentions of showing off what can be done with CSS.
Breaking down the problem and demonstrating the markup
The basic idea that David proposed involved taking the ul and li out of the equation to suposedly unclutter the markup and simplify what the navigation looks like. I have duplicated the navigation that was proposed below to show what I’m talking about exactly.
<div id="navigation">
<h3>Categories</h3>
<a href="/css">CSS</a>
<a href="/html">HTML</a>
<a href="/mootools">MooTools</a>
<a href="/php">PHP</a>
<a href="/xml">XML</a>
</div>
As you can probably already tell there are some problems with this. The lack of tags and overall semantics of this is problematic at best. This is the basic code that I will be discussing in the article that can cause problems with accessibility, semantics and flexibility in design.
The way it should be done, also duplicated from the article, and it is simple and straight forward. It is the typical method that is used to create basic navigation which allows for much more flexibility in design. He had it right the first time.
<div id="navigation">
<h3>Categories</h3>
<ul>
<li><a href="/css">CSS</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/mootools">MooTools</a></li>
<li><a href="/php">PHP</a></li>
<li><a href="/xml">XML</a></li>
</ul>
</div>
The semantics of using lists for navigation
When it comes down to semantics it is important to understand that XHTML isn’t perfectly semantic yet, but for what we are working with we need to do the best we can. In XHTML 2.0 there will be more semantic markup (if we can move forward with the technology) that actually makes sense. For now, however, lists are the best options we have when it comes to semantic navigation. A series of links are simply just that, nothing more. The reason we use lists is not only for the catch-phrase of semantics but because your document needs flow and definition when it comes to markup.
Without a document flow of any kind your document ceases to function, it may look O.K. in the browser you are using on your computer. That won’t be the case for screen readers, mobile browsers and text-based browsers though. It is important to think about attempting to accommodate as many as possible. You can easily be losing visitors because of your site not being accessible to them, hence your small audience.
Making your site accessible to screen readers
I addressed this a little bit already but the importance is huge, especially when it comes to making screen readers function properly. Can you imagine how frustrating it would be for someone to figure out how to navigate your site if you’ve simply thrown a series of links together. It is extremely important to make your site as accessible as you can. It is our job as web workers to ensure that the site is more then functional for you and your client but for the entire web audience at large. You may be in need of such features in the future, consider the future of your web experience when you breed indifference.
We must strive to provide accessible options for those with accessibility needs. As web workers, it is our duty to ensure we do everything within our power to accommodate those that are in need of such features. It isn’t just a buzz word or a popular topic right now. It is part of our jobs as web workers. It is essential.
Style and design limitations; the aesthetics of your web sites
When it comes to styling out lists you can find yourself limited by the speed at which CSS is progressing when it comes to technology. Currently and I’m sure for some time to come we will all be limited on how much we can style based on how many tags we can “grab” on to within our markup. Using only links will prevent you from being able to do nearly all of the CSS styling that makes an aesthetically pleasing navigation. Especially the CSS sliding door effect. It had been mentioned by the author that spans could be used, but I’m confident that this idea completely destroys the purpose of making a navigation without lists.
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).
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.
Lists for navigation should be mandatory
It may not be mandatory in the we’ll-get-you sense of the term, but it should be a W3C recommendation when it comes down to accessibility. I’m not sure the standards police will be knocking down your door but standardistas such as myself will write nasty things about you (it sounds so bad, doesn’t it).
I’m not claiming to be a CSS Wizard but I am an advocate for standards and semantic markup. I’m sure if you dug into my site there are mistakes made, I’m not perfect by any means. I do however attempt to do my best at giving good and quality advice that I have researched to know is accurate and recommended.
Whats Next?
26 Responses to “The importance of using lists for navigation”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
Great post, I agree with you 100% about the lack of semantic markup and usefulness of the post by David. I do have to side with him a little on the fact that he was probably just showing what can be done without a list.
dustin did mention that he wasn’t attacking him in the first of the article jacob, and that exact same statement about what can be done
I appreciate your response and no offense is taken.
I’d like to write a long response but I don’t have much more to say than that my article was about what could be done with CSS, not should.
I also want to mention that I didn’t discuss subnavigation in my article, nor would I have, because the markup there would not have allowed it.
I gotta admit I’m sitting the fence a little bit on this one. I totally agree that using lists for navigation is a good thing and makes sense on a lot of levels. But I do not think it’s necessarily semantic.
Navigation is sorta-kinda a list, but I think of lists more like things I need from the grocery store or how to fix a flat tire step-by-step. For those examples, a list is the only semantic choice. But for navigation, I think the choice isn’t as clear.
Certainly the menu needs to be “wrapped” in something. Typically thats an unordered list, which does a fine job. I know that div’s get way overused sometimes, but I would suggest a div (or “division” — semantically) makes just as much sense as a ul. So speaking purely semantically, I don’t think there is any difference.
Perhaps more importantly is how the navigation looks both with CSS on and without.
I threw together a quick example of some navigation that does not use a list that makes perfect sense to me with CSS both on and off.
But be careful with XHTML 2.0. The lack of support of XHTML1.0 caused most browser vendors to form the WHATWG group and start a different project in W3C: HTML 5. This effort at least postpones the XHTML2.0 standard, if does not cancel it.
Chris: I don’t agree that a div would be as semantic, I feel that divs are used for dividing up a page. Currently the most semantic tag that we have available is a list. The reason for that is a list is used to list out navigation elements.
It seems simplified but that is the way I think we should all do our markup. As simple as possible in order to get our desired effect. We just have to ensure we aren’t simplifying it too far and preventing our visitors from being able to view our sites in their desired method.
Thank you David and Chris for being good sports.
Stampie: I agree, the future of web design does look a little confusing. Things seem to be shifting away from XHTML towards HTML 5 but it is hard to tell what browser vendors are ultimately going to adopt and what timeline they will use.
[...] Geen gebruik maken van lijsten kan leiden tot verwarring, slechte toegankelijkheid en slechte code. Dustin brewer heeft een reactie geschreven op een artikel van een populaire css tutorial site over het niet [...]
Great article. It’s good to be reminded of why we do what we do sometimes. I’m sure this article will be very helpful to the CSS novice.
Has anyone ever USED a screenreader?
Writing so called ‘acessible’ HTML only serves to subsidize the makers of those outlandishly and obscenely expensive pieces of shit! ( JAWS for example is more than $900 for the ‘basic’ version)
no blind person is ever happy with the user experience and in any event, are the blind the only people deserving of ‘accessibility consideration’??
This whole argument is as akin to accessibility as an AMERICAN FLAG bumper sticker is to PATRIOTISM -
A feel good platitude which actually does little for those who need it most.
maybe they are expensive but they are what they are and as web professionals I agree with Dustin that it is out job to make sure we accommodate the available technology as best as possible.
I’ve struggled with the “screen reader” thing as well. People talk about them all the time and how important it is to support them.
I think it’s best to think of the “screen reader” as symbolic of a whole set issues.
If your site is set up to look and function well in screen reader, it means that:
- The markup is solid
- It looks good without CSS
- It looks good without Javascript
- It it is Search Engine Friendly
Even if you are cold-hearted and don’t care about how the disabled experience your site, you should at least care about those things.
On another note, HTML 5 has the ultimate solution for semantically correct navigation, as it literally includes a <nav> tag
I still maintain that screen readers are outdated anachronisms that holds us back, both sighted and not.
With multimedia pc’s who needs that shit?
Instead of having your html mangled and almost parsed by a screen reader, why not simply design a proper “non-sight” interface with a page properly designed to be navigated by ear instead of a finger on the mouse?
give screen readers the finger!
seriously, we already have experience in audible navigation, each time we pick up a phone!
Why do we have to use a div tag?
Can’t we just go with <ul id…?
You would have the same control as with a div but your markup would be better and easier to understand.
Ya…using UL LI elements helps a lot in achieving a lot of accessibility…
The Importance of Using Lists for Navigation…
[...]It is important to use lists in navigation for semantics, accessibility, aesthetics and flexibility. Not using lists for navigation can lead to confusion, inaccessibility and unclear markup. There has been an article published from a popular CSS t…
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.
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*!
It also allows for richer styling, there simply isn’t any good reasons not to use lists for navigation.
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.
Good words.
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.
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.
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.
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.
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…