Taken from Lilian Vernon (lillianvernon.com). Judging from the state of my trousers today, I could use one too…

<div class="hlisting">
	<div class="item hproduct">
		<ol class="breadcrumbs">
			<li><a href="http://www.lillianvernon.com/home.jsp">Home</a></li>
			<li class="category"><a href="http://www.lillianvernon.com/catalog/category.jsp?parentCatId=3">Store & Organize</a></li>
			<li class="category"><a href="http://www.lillianvernon.com/catalog/thumbnail.jsp?parentCatId=3&catId=149">Closet & Drawers</a></li>
		</ol>
		<div class="picside">
			<img src="http://lillianvernon.richfx.com.edgesuite.net/image/media/046534_M.jpg" alt="photo of deluxe hanging pants rack" class="photo" /><br/>
			<img src="http://www.lillianvernon.com/assets/images/new_prod_detail/zoom.jpg" alt="zoom in" />
		</div>
		<div class="infoside">
			<h1 class="fn">Deluxe Hanging Pants Rack</h1>
			<div class="identifier>
				<span class="type">SKU</span>:
				<span class="value">046534</span>
			</div>
			<div class="details">
				<p class="description">Holds 8 pairs of slacks neatly with shelf for sweaters, shirts and more! 16" wide with non-slip plastic sleeves that prevent sliding. Silver finish. Easy assembly. </p>
				<div class="savings">SAVE<br/>$7</div>
				<div class="historical">Was $14.98</div>
				<div class="now">Now <span class="price">$7.49</span></div>
				<div class="savings">Save $7.49</div>
				<div class="purchase">
					<div class="quantity">Quantity 1</div>
					<div class="buy"><img src="/assets/images/new_prod_detail/add_to_cart0108.gif" alt="add to cart" /></div>
				</div>
			</div>
		</div>
	</div>
</div>

hproduct example src

Today’s example of the day is visually presented like this:

<div class="hlisting">
	<div class="item hproduct">
		<ol>
			<li class="lister vcard"><a class="url fn" href="http://storename.com">Magers and Quinn</a></li>
			<li class="category"><a href="http://storename.com/categories/books">Books</a></li>
			<li class="category"><a href="http://storename.com/categories/cooking">Cooking</a></li>
			<li class="category"><a href="http://storename.com/categories/quick-easy-cooking">Quick and Easy Cooking</a></li>
			<li>Gordon Ramsay's Fast Food</li>
		</ol>
		<div class="leftcol">
			<img src="http://images.storename.com/products/ramsay-fast-food.jpg" class="photo" alt="gordan ramsay fast food book" />
			<p><span class="condition">New:</span> <span class="price">$27.99</span></p>
			<p>Pub price: $35.00</p>
			<p>Hardcover</p>
			<p class="availability">Out of stock</p>
		</div>
		<div class="rightcol">
			<h1 class="fn">Gordon Ramsay's Fast Food Recipes from the F Word</h1>
			<p>By Ramsay, Gordon</p>
			<dl class="identifier">
				<dt>ISBN:</dt>
				<dd>1554700647</dd>
			</dl>
			<dl>
				<dt>Contributors:</dt>
				<dd>Sargeant, Mark (Contributor); Quah, Emily (Contributor); Mead, Jill (Photographer)</dd>
				<dt>Publisher:</dt>
				<dd>Amer Youth Hostels</dd>
				<dt>Published:</dt>
				<dd>2008</dd>
				<dt>Pages:</dt>
				<dd>255</dd>
				<dt>Weight:</dt>
				<dd>2.70lbs.</dd>
				<dt>Height:</dt>
				<dd>10.25"</dd>
				<dt>Width:</dt>
				<dd>8.00"</dd>
				<dt>Depth:</dt>
				<dd>1.50"</dd>
				<dt>Language:</dt>
				<dd>English  </dd>
			</dl>
			<h4>Publishers Comments</h4>
			<p class="description">A celebrity host of Hell's Kitchen features more than one hundred accessible recipes that are organized in accordance with everyday needs and special occasions, in a volume that places an emphasis on fast preparation and features complementary tips on stocking a pantry.</p>
		</div>
	</div>
</div>

Download example markup (HTML)

Today Google announced support for microformats and RDFa markup in a feature they’re calling “rich snippets”. As a participant in the microformats community (particularily hProduct), I have to say, as the English put it, I’m “chuffed”. There are good people putting in a lot of time in and effort to streamline, standardize and improve these markup techniques.

There’s the front-end web developer side of me that is feeling a bit more validated today. In my ten year development tenure, I have had my concerns on front end standards swept aside by the needs of the businesses I’ve worked for, and the hyper-focus by IT and business groups on back-end systems. Maybe I’m overdoing it a bit, but with the ever-growing support for clean code, and data rich markup on the front end, we seem to be at a very deserved turning point.

Note: I would also be remiss if I failed to mention Yahoo! SearchMonkey’s pre-existing support for microformats, as well as countless other apps and plugins…