I came across a rather timely article this morning on web semantics, entitled "Semantics: The Red-Headed Step-Child of Markup" by Garrett Dimon.

While working on ideas for my site reorganization and redesign (which is still in progress), I struggled with how to present some items on my website – primarily my site navigation. I’ve been in the habit of using UL’s, but I figured there had to be a better way. There is..

When I first started picking up HTML and web design in general, I used to scour the source code of sites I liked the look of to see how they did things. I still do that. The best way to learn HTML or CSS is to look at what other people have done and build on top of it. In this case, I was looking through Jeffrey Zeldman’s source code on Zeldman.com for ideas. I noticed he was using DL’s! I also read Chapter 4 in Dan Cederholm’s “Bulletproof Web Design” where he used a DL to display groupings of photos, titles, and captions.

I have a confession to make: I have never, ever, ever, used a DL in markup before. It’s not that I didn’t know about them. The more I think about it though, the more they make sense for Navigation Lists, Product Displays, etc. Dictionary Lists are highly flexible, and it terms of their meaning… they are used to Define something. So, in the context of a product…

<dl>

<dt>Product Name</dt>

<dd><img src=”%photourl%” /></dd>

<dd>This is where the product description would go.</dd>

</dl>

This markup is completely valid, and makes sense – because we are defining a product!

I’m telling you all of this to tell you that Dimon’s article made me realize there are a lot more under-utilized tags out there – label, cite, code, samp, pre, and blockquote… Realizing that has made me reconsider the usage of some of these tags and how I might incorporate them into my markup. Each of these tags connotates certain meaning to the text they encapsulate. Using them can provide more meaning to your documents, and will give you even greater design flexibility with each tag.

Great article, Garrett. Thanks for reminding me about what I’ve been missing out on.