Pimp My Semantic HTML Ride

Had a conversation at work about producing semantic HTML. The idea is that each piece of content should be described by the most specific HTML element that does the job, and the current is driven by CSS's success in separating presentation from content. A noble goal.

The all too pervasive incarnation of this crusade to make thine document semantic is materialized by the menu as list. The concept is simple. Instead of div and span elements, use ul and li elements to describe the structure of your menus. After all, isn't the menu a list of items?

Mmm... not really. Not more than pretty much anything in the page, like the collections of paragraphs that you're now reading. In fact, you must resist the temptation to see a list in everything; otherwise, the menu as list rule will transform your whole document into a collection of lists of lists of lists in no time. I call it the menu as list syndrome.

Not convinced? The purpose of ul is hinted not only by its name and formal description at the W3C, but also by its default appearance in web browsers. In fact, a list renders as a series of bullet points in all serious browsers (the browser that I'm going to write in order to disprove this assertion notwithstanding), a good indication of its inclusion into the group of typographic elements of a document.

I don't blame my colleagues for having come up with lists for menus. In fact, the web is buzzing with this approach (probably a trend promoted by ALA). I guess people do it out of that innate desire to improve that we all share and out of a will to be on the wave and use the buzzword.

But, at the end of the day, I prefer to describe my menus as divs and spans. It saves me the trouble of overriding default, common-sense rendering rules in my stylesheet, and, frankly, I don't really see the semantic gain of the list as menu.