hproduct-recipes
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>