E-commerce layout with definition lists

With work being carried out at Jadu on a new and frankly exciting e-commerce project, I’ve been thinking about better ways to layout the products pages using semantic mark-up.

The use of definition lists came to mind whilst reading CSS Mastery, as the amount of product information or descriptions of a product seemed to almost decree their use. They are under used (by myself) so here are a few quick references.

1. Max design looks at the basic use of the dl in Definition lists – misused or misunderstood?
2. Malarkey looks directly at the use of definition lists in product layout in E-commerce definition lists, which is a bit handy
3. Scott McDaniel gives good writing in Manipulating Definition Lists for Fun and Profit

The definition list can also be used for adverts and news stories or anything that uses a summary, an image and a title.

1. Malarkey again describes this in CSS: Hold the front page
2. Community MX (!) discuss it in Create a Teaser Thumbnail List Using CSS

Reflecting on the definition list, it’s easy to see how they can be misused, like the table, they can be pushed and sqeezed into holes they just weren’t meant to fit. Used wisely, they do improve semantics and increase the amount of hooks for CSS layout and presentation.