Difference between revisions of "h-product"

From Microformats Wiki
Jump to navigation Jump to search
(Redirecting to microformats2#h-product)
(Dumped with example, BC and property details including TODO about u-identifier markup)
Line 1: Line 1:
#REDIRECT:[[microformats2#h-product]]
+
<entry-title>h-product</entry-title>
 +
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
 +
----
 +
<dfn style="font-style:normal;font-weight:bold">h-product</dfn> is a simple, open format for publishing products on the web. h-product is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.
 +
 
 +
h-product is the [[microformats-2]] replacement for [[hProduct]].
 +
 
 +
== Example ==
 +
Here is a simple minimal product example:
 +
 
 +
<source lang=html4strict>
 +
<div class="h-product">
 +
  <h1 class="p-name">Microformats For Dummies</h1>
 +
  <img class="u-photo" src="http://example.org/mfd.png" alt="" />
 +
  <div class="e-description">
 +
    <p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>
 +
  </div>
 +
  <p>Yours today for only <data class="p-price" value="20.00">$20.00</span>
 +
    from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a>
 +
  </p>
 +
</div>
 +
</source>
 +
 
 +
=== Get started ===
 +
The class '''<code>h-product</code>''' is a ''root class name'' that indicates the presence of an h-product.
 +
 
 +
'''p-name''', '''p-price''', '''u-photo''' and the other property classnames listed below define elements as ''properties'' of the h-product.
 +
 
 +
See [[microformats-2-parsing]] to learn more about property classnames.
 +
 
 +
== Properties ==
 +
 
 +
* '''<code>p-name</code>''' - name of the product
 +
* '''<code>u-photo</code>''' - photo of the product
 +
* '''<code>p-brand</code>''' - manufacturer, can also be a nested <code>h-card</code>
 +
* '''<code>p-category</code>''' - freeform categories or tags applied to the item by the reviewer
 +
* '''<code>e-description</code>'''
 +
* '''<code>u-url</code>''' - URL of the product
 +
* '''<code>u-identifier</code>''' - includes type (e.g. mpn, upc, isbn, issn, sn, vin, sku etc.) and value.
 +
* '''<code>p-review</code>''' - a review of the product, can also be a nested <code>h-review</code>
 +
* '''<code>p-price</code>''' - retail price of the product
 +
 
 +
For backward compatibility, you may wish to use classic [[hProduct]] classnames in addition to the more future-proof h-product properties, for example:
 +
 
 +
<source lang=html4strict>
 +
<div class="h-product hproduct">
 +
  <h1 class="p-name fn">Product Name</h1>
 +
</div>
 +
</source>
 +
 
 +
Microformats parsers should detect classic properties and parse them as microformats 2 properties. If an "h-product" is found, don't look for an "hProduct" on the same element.
 +
 
 +
Compatibility root class name: hProduct
 +
 
 +
Properties: (parsed as p- plain text unless otherwise specified)
 +
 
 +
* <code>fn</code> - parse as '''<code>p-name</code>'''
 +
* <code>photo</code>  - parse as '''u-'''
 +
* <code>brand</code>
 +
* <code>category</code>
 +
* <code>description</code>
 +
* <code>identifier</code> - parse as '''u-'''
 +
* <code>url</code> - parse as '''u-'''
 +
* <code>review</code> - including compat root class <code>hreview</code> in the absence of <code>h-review</code>
 +
* <code>price</code>
 +
 
 +
== Status ==
 +
 
 +
'''h-product''' is a microformats.org draft specification. Public discussion on h-product takes place on [[h-product-feedback]], the #microformats [[irc]] channel on irc.freenode.net, and [http://microformats.org/discuss/mail/microformats-new/ microformats-new mailing list].
 +
 
 +
h-product is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-products up with classic [[hProduct]] classnames.
 +
 
 +
== Property Details ==
 +
 
 +
(stub, add any property explanations here)
 +
 
 +
TODO: u-identifier supposedly “includes type” — how so? URI scheme? Need examples of how to mark up the various different identifier types.
 +
 
 +
'''price''' was an experimental property which has real world adoption due to [[Google]] and [[Bing]] search support of hProduct. Due to this it has been included in the updated h-product spec.
 +
 
 +
== Examples in the Wild ==
 +
 
 +
* … add any h-product examples you find in the wild
 +
 
 +
== Background ==
 +
 
 +
h-product is based on the existing [[hProduct]] specification.
 +
 
 +
== See Also ==
 +
 
 +
* [[h-product-feedback]]
 +
* [[microformats-2]]
 +
* [[h-card]] can be nested in h-product
 +
* [[hProduct]] is the classic microformat replaced by h-product

Revision as of 10:03, 14 June 2013

<entry-title>h-product</entry-title> Tantek Çelik (Editor)


h-product is a simple, open format for publishing products on the web. h-product is one of several open microformat draft standards suitable for embedding data in HTML/HTML5.

h-product is the microformats2 replacement for hProduct.

Example

Here is a simple minimal product example:

<div class="h-product">
  <h1 class="p-name">Microformats For Dummies</h1>
  <img class="u-photo" src="http://example.org/mfd.png" alt="" />
  <div class="e-description">
    <p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>
  </div>
  <p>Yours today for only <data class="p-price" value="20.00">$20.00</span>
     from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a>
  </p>
</div>

Get started

The class h-product is a root class name that indicates the presence of an h-product.

p-name, p-price, u-photo and the other property classnames listed below define elements as properties of the h-product.

See microformats2 parsing specification to learn more about property classnames.

Properties

  • p-name - name of the product
  • u-photo - photo of the product
  • p-brand - manufacturer, can also be a nested h-card
  • p-category - freeform categories or tags applied to the item by the reviewer
  • e-description
  • u-url - URL of the product
  • u-identifier - includes type (e.g. mpn, upc, isbn, issn, sn, vin, sku etc.) and value.
  • p-review - a review of the product, can also be a nested h-review
  • p-price - retail price of the product

For backward compatibility, you may wish to use classic hProduct classnames in addition to the more future-proof h-product properties, for example:

<div class="h-product hproduct">
  <h1 class="p-name fn">Product Name</h1>
</div>

Microformats parsers should detect classic properties and parse them as microformats 2 properties. If an "h-product" is found, don't look for an "hProduct" on the same element.

Compatibility root class name: hProduct

Properties: (parsed as p- plain text unless otherwise specified)

  • fn - parse as p-name
  • photo - parse as u-
  • brand
  • category
  • description
  • identifier - parse as u-
  • url - parse as u-
  • review - including compat root class hreview in the absence of h-review
  • price

Status

h-product is a microformats.org draft specification. Public discussion on h-product takes place on h-product-feedback, the #microformats #microformats chat channel on irc.freenode.net, and microformats-new mailing list.

h-product is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-products up with classic hProduct classnames.

Property Details

(stub, add any property explanations here)

TODO: u-identifier supposedly “includes type” — how so? URI scheme? Need examples of how to mark up the various different identifier types.

price was an experimental property which has real world adoption due to Google Search and Microsoft Bing Search Engine search support of hProduct. Due to this it has been included in the updated h-product spec.

Examples in the Wild

  • … add any h-product examples you find in the wild

Background

h-product is based on the existing hProduct specification.

See Also