Using definition lists for site navigation?

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.

One Comment

  1. Mark says:

    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.