Revision as of 21:39, 22 July 2014 by Tantek (Talk | contribs)
(diff) ←Older revision | Current revision (diff) | Newer revision→ (diff)

Jump to: navigation, search

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.

h-product is the microformats2 update to hProduct.

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 2020-04-06, 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>
  <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>

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 microformats-2-parsing to learn more about property classnames.


h-product properties, inside an element with class h-product:


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


Main article: validators

Test and validate microformats2 markup in general with:

Backward Compatibility

Publisher Compatibility

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>

Parser Compatibility

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)


h-product is based on the existing hProduct specification.

See Also


h-product was last modified: Wednesday, December 31st, 1969