hproduct-recipes: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(more inital load content)
(adding hlisting/product/review example)
Line 1: Line 1:
=== Coded Recipe examples ===
== Coded Recipe examples ==


This page is to provide coded examples showing the interplay between hListing, hProduct and other formats (hReview, hAggregateReview) that could be used to create semantic page markup.
This page is to provide coded examples showing the interplay between hListing, hProduct and other formats (hReview, hAggregateReview) that could be used to create semantic page markup.
=== hlisting, hproduct, haggregatereview/hreview ===


<pre><nowiki>
<pre><nowiki>
 
<div class="hlisting">
 
<div class="hproduct">
 
<ol>
 
<li><a href="http://storename.com">Store name</a></li>
 
<li class="category"><a href="http://storename.com/tv-and-video">TV &#38; 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>
</nowiki></pre>
</nowiki></pre>

Revision as of 20:57, 3 March 2009

Coded Recipe examples

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

hlisting, hproduct, haggregatereview/hreview

<div class="hlisting">
	<div class="hproduct">
		<ol>
			<li><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>