hproduct-recipes

Coded Recipe examples

This page is to provide coded examples showing the interplay between hListing, hProduct and other formats (hAggregateReview, xoxo, to name a few) that could be used to create better semantic page markup.

hlisting, hproduct, haggregatereview/hreview, xoxo

<div class="hlisting">
	<div class="hproduct">
		<ol>
			<li class="lister"><a href="http://storename.com">Store name</a></li>
			<li class="category"><a href="http://storename.com/tv-and-video">TV & Video</a></li>
			<li class="category"><a href="http://storename.com/televisions">Televisions</a></li>
			<li>Product Info</li>
		</ol>
		<img src="http://images.storename.com/products/samsung-ln40a550.jpg" class="photo" alt="picture of samsung ln40a550" />
		<div class="fn"><span class="brand">Samsung</span> - 40" 1080p Flat-Panel LCD HDTV</div>
		<dl class="identifier">
			<dt>Model</dt>
			<dd>LN40A550</dd>
			<dt>SKU</dt>
			<dd>8749465</dd>
		</dl>
		<div class="haggreggatereview">
			<div class="hreview">
				<span class="fn"><a href="http://storename.com/path/to/product" class="url"><img src="http://images.storename.com/images/misc/ratings_star_3_5.gif" alt="3.5 out of 5 stars"/></a></span><span class="rating">4.7</span> / <span class="best">5</span> (<span class="num">13</span> reviews)</div>
			</div>
		</div>
		<div class="price">$1,099.99</div>
		<ol class="xoxo">
			<li><h2>Specifications</h2>
				<dl>
					<dt>Warranty Terms - Parts</dt>
					<dd>1 year</dd>
					<dt>Warranty Terms - Labor</dt>
					<dd>1 year</dd>
					<dt>Product Height</dt>
					<dd>27" with stand (24-7/10" without)</dd>
					<dt>Product Width</dt>
					<dd>39-1/5"</dd>
					<dt>Product Weight</dt>
					<dd>61.5 lbs. with stand (54.5 lbs. without)</dd>
					<dt>Product Depth</dt>
					<dd>11-4/5" with stand (3-3/5" without)</dd>
					<dt>TV Type</dt>
					<dd>LCD Flat-Panel</dd>
				</dl>
			</li>
	</div>
</div>