Using definition lists for site navigation?
A notebook entry published on January 29, 2003
Doug Bowman has a nice post about using unordered lists for site navigation, then using CSS to style them any way you’d like (horizontally for instance). I think it’s a good idea and makes sense, structurally, in the code. Going a step further, why not use a definition list to do the job with a
<dt> of “Navigation”? This will label the list for non-styled viewers (and readers), yet it can be hidden in the styled version using #nav dl { display: none; }. I think it makes sense for navigation lists to be titled — especially when there are additional lists for sub-navigation or other header elements. This site now uses one <dl> for the nav, then hiding the definition title.
Mark → www.designwisestudios.com
I like this approach a lot, but it has one big drawback for Dreamweaver users. If you’re trying to save time by typing your list items in design view, everytime you press [return] it creates a new <dt> which is VERY annoying. It is much easier to use a <ul> for this reason alone.
Comments have been closed for this entry.
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of EdA tiny design studio founded by Dan Cederholm. We create simple interfaces balanced with a standards-based methodology, and we’re based in Massachusetts, USA.
Add your own
1 Comment