hproduct-recipes

From Microformats Wiki
Revision as of 22:16, 3 March 2009 by JayMyers (talk | contribs) (adding hlisting/product/audio example)
Jump to navigation Jump to search

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>


hlisting, hproduct, haudio, haggregatereview/hreview

<div class="hlisting">
	<div class="hproduct haudio">
		<ol>
			<li class="lister"><a href="http://storename.com">Store name</a></li>
			<li class="category"><a href="http://storename.com/gangsta">Gangsta/Hardcore</a></li>
			<li>Product Info</li>
		</ol>
		<img src="http://images.storename.com/products/50cent-curtis.jpg" class="photo" alt="picture of 50 cent" />
		<div class="album">Curtis</div>
		<div class="contributor"><span class="vcard"><span class=n nickname">50 Cent</span></span></div>
		<p>Release date:<abbr class="published" title="2007-09-11">September 11, 2007</abbr></p>
		<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_4_0.gif" alt="4 out of 5 stars"/></a></span><span class="rating">4.0</span> / <span class="best">5</span> Number of reviews:(<span class="num">4</span> reviews)</div>
		</div>
		<div class="price">$9.99</div>
		<a href="add-to-cart-url" rel="payment"><img src="http://storename.com/images/global/add-to-cart.gif" alt="add to cart" /></a>
		<h2>Tracks</h2>
		<ol>
			<li class="item"><span class="position">1</span>.<span class="fn">Intro</span><a href="http://images.storename.com/media/sample/50cent-intro.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">2</span>.<span class="fn">My Gun Go Off</span><a href="http://images.storename.com/media/sample/50cent-gun-go-off.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">3</span>.<span class="fn">Man Down - (censored)</span><a href="http://images.storename.com/media/sample/50cent-man-down.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">4</span>.<span class="fn">I'll Still Kill - (with Akon)</span><a href="http://images.storename.com/media/sample/50cent-ill-still-kill.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">5</span>.<span class="fn">I Get Money</span><a href="http://images.storename.com/media/sample/50cent-i-get-money.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">6</span>.<span class="fn">Come & Go - (with Dr. Dre)</span><a href="http://images.storename.com/media/sample/50cent-come-go.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">7</span>.<span class="fn">Ayo Technology - (with Timbaland/Justin Timberlake)</span><a href="http://images.storename.com/media/sample/50cent-ayo-technology.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">8</span>.<span class="fn">Follow My Lead - (with Robin Thicke)</span><a href="http://images.storename.com/media/sample/50cent-follow-my-lead.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">9</span>.<span class="fn">Movin' on Up</span><a href="http://images.storename.com/media/sample/50cent-movin-on-up.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">10</span>.<span class="fn">Straight to the Bank</span><a href="http://images.storename.com/media/sample/50cent-straight-to-bank.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">11</span>.<span class="fn">Amusement Park</span><a href="http://images.storename.com/media/sample/50cent-amusement-park.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">12</span>.<span class="fn">Fully Loaded Clip</span><a href="http://images.storename.com/media/sample/50cent-fully-loaded-clip.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">13</span>.<span class="fn">Peep Show - (with Eminem)</span><a href="http://images.storename.com/media/sample/50cent-peep-show.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">14</span>.<span class="fn">Fire - (with Young Buck/Nicole Scherzinger)</span><a href="http://images.storename.com/media/sample/50cent-fire.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">15</span>.<span class="fn">All of Me - (with Mary J. Blige)</span><a href="http://images.storename.com/media/sample/50cent-all-of-me.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">16</span>.<span class="fn">Curtis 187</span><a href="http://images.storename.com/media/sample/50cent-curtis-187.mp3" rel="sample">Listen</a></li>
			<li class="item"><span class="position">17</span>.<span class="fn">Touch the Sky - (with Tony Yayo)</span><a href="http://images.storename.com/media/sample/50cent-touch-the-sky.mp3" rel="sample">Listen</a></li>
		</ol>
	</div>
</div>