Tantek Çelik (Editor)
h-product is a simple, open format for publishing product data on the web. h-product is one of several open microformat draft standards suitable for embedding data in HTML/HTML5.
Per CC0, to the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. In addition, as of 2014-08-02, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0.
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</data> from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a> </p> </div>
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 microformats-2-parsing to learn more about property classnames.
h-product properties, inside an element with class h-product:
p-name- name of the product
u-photo- photo of the product
p-brand- manufacturer, can also be embedded
h-cardMain article: h-card
p-category- freeform categories or tags applied to the item by the reviewer
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, optionally embedded
h-reviewMain article: h-review
p-price- retail price of the product
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.
(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.
Examples in the Wild
- Barnaby Walters’ posting UI is marked up with h-product and experimental h-x-app markup so that authorization UIs can provide a better experience whilst authorizing, without having to pre-register apps and upload logos
- … add any h-product examples you find in the wild
Test and validate microformats2 markup in general with:
- http://waterpigs.co.uk/php-mf2/ - enter your markup directly
- http://pin13.net/ - enter a URL to a page to test where it says "Microformats Parser"
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 only if a classic root class name is found and parse them as microformats2 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
photo- parse as u-
identifier- parse as u-
url- parse as u-
review- including compat root class
hreviewin the absence of
h-product is based on the existing hProduct specification.