Css Semantic Challenge Results

Published in CSS on Tuesday, March 2nd, 2004

Image for the challenge

The goal of the challenge: come up with a chunk of semantically valuble markup and the CSS that would reproduce the search result represented by the above image. Being a search result, the code had to allow for the possibility of several instances of the object on one page.

Besides my own example, three others stepped up and offered their solutions. Skimming over the code, it seems that there were two camps, those that marked up each result as an item in a list (similar to the new search results on Yahoo! Search) and those that didn't.

I wont be saying anything particular about the results, other than that it is always an educational experience seeing other peoples solutions to problems, especially in the world of web design, where there are always so many options.

With regards to this particular example, it was a bit of a struggle to write up something that was semantically valid while keeping in mind accessibility (hello font-resizing) and all of the other tradeoffs that we designers face everyday.

So, here are the samples:

Little experiments like these and the excellent SimpleQuiz by Dan Cederholm are great methods for learning to think in new ways. I've learnt from the other examples here, and I hope their authors do as well.

To end this off, I received a last minute mock-up from Lars Schafft, who tested out the use of a definition list for this purpose. He asked me to mention that he did not test in all browsers. Using a definition list here is a great idea, and seems to me like a perfect match. Now if only the specs weren't so vague about definition lists...

Comments and Feedback

Home » Blog » Web Development » CSS

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..