Difference between revisions of "h-product"

From Microformats Wiki
Jump to navigation Jump to search
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(12 intermediate revisions by 5 users not shown)
Line 1: Line 1:
HOW THING THROUGH
+
{{DISPLAYTITLE:h-product}}
HOW MAKE THING THROUGH
+
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
HOW THING BE THROUGH
+
----
HOW MAKE THING BE THROUGH
+
<dfn style="font-style:normal;font-weight:bold">h-product</dfn> is a simple, open format for publishing product data on the web. h-product is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML.
HOW ANYTHING THROUGH
+
 
HOW MAKE ANYTHING THROUGH
+
h-product is the [[microformats2]] update to [[hProduct]].
HOW ANYTHING BE THROUGH
+
 
HOW MAKE ANYTHING BE THROUGH
+
{{cc0-owfa-license}}
HOW EVERYTHING THROUGH
+
 
HOW MAKE EVERYTHING THROUGH
+
== Example ==
HOW EVERYTHING BE THROUGH
+
Here is a simple minimal product example:
HOW MAKE EVERYTHING BE THROUGH
+
 
HOW UNIVERSE THROUGH
+
<source lang=html4strict>
HOW MAKE UNIVERSE THROUGH
+
<div class="h-product">
HOW UNIVERSE BE THROUGH
+
  <h1 class="p-name">Microformats For Dummies</h1>
HOW MAKE UNIVERSE BE THROUGH
+
  <img class="u-photo" src="http://example.org/mfd.png" alt="" />
HOW THING OUT
+
  <div class="e-description">
HOW MAKE THING OUT
+
    <p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>
HOW THING BE OUT
+
  </div>
HOW MAKE THING BE OUT
+
  <p>Yours today for only <data class="p-price" value="20.00">$20.00</data>
HOW ANYTHING OUT
+
    from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a>
HOW MAKE ANYTHING OUT
+
  </p>
HOW ANYTHING BE OUT
+
</div>
HOW MAKE ANYTHING BE OUT
+
</source>
HOW EVERYTHING OUT
+
 
HOW MAKE EVERYTHING OUT
+
Parsed JSON:
HOW EVERYTHING BE OUT
+
<source lang=javascript>
HOW MAKE EVERYTHING BE OUT
+
{
HOW UNIVERSE OUT
+
  "items": [
HOW MAKE UNIVERSE OUT
+
    {
HOW UNIVERSE BE OUT
+
      "type": [
HOW MAKE UNIVERSE BE OUT
+
        "h-product"
HOW THING THROUGH
+
      ],
HOW MAKE THING THROUGH
+
      "properties": {
HOW THING BE THROUGH
+
        "name": [
HOW MAKE THING BE THROUGH
+
          "Microformats For Dummies"
HOW ANYTHING THROUGH
+
        ],
HOW MAKE ANYTHING THROUGH
+
        "photo": [
HOW ANYTHING BE THROUGH
+
          "http://example.org/mfd.png"
HOW MAKE ANYTHING BE THROUGH
+
        ],
HOW EVERYTHING THROUGH
+
        "description": [
HOW MAKE EVERYTHING THROUGH
+
          {
HOW EVERYTHING BE THROUGH
+
            "value": "Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!",
HOW MAKE EVERYTHING BE THROUGH
+
            "html": "<p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>"
HOW UNIVERSE THROUGH
+
          }
HOW MAKE UNIVERSE THROUGH
+
        ],
HOW UNIVERSE BE THROUGH
+
        "price": [
HOW MAKE UNIVERSE BE THROUGH
+
          "20.00"
HOW THING OUT
+
        ],
HOW MAKE THING OUT
+
        "brand": [
HOW THING BE OUT
+
          {
HOW MAKE THING BE OUT
+
            "value": "ACME Publishing inc.",
HOW ANYTHING OUT
+
            "type": [
HOW MAKE ANYTHING OUT
+
              "h-card"
HOW ANYTHING BE OUT
+
            ],
HOW MAKE ANYTHING BE OUT
+
            "properties": {
HOW EVERYTHING OUT
+
              "name": [
HOW MAKE EVERYTHING OUT
+
                "ACME Publishing inc."
HOW EVERYTHING BE OUT
+
              ],
HOW MAKE EVERYTHING BE OUT
+
              "url": [
HOW UNIVERSE OUT
+
                "http://example.com/acme"
HOW MAKE UNIVERSE OUT
+
              ]
HOW UNIVERSE BE OUT
+
            }
HOW MAKE UNIVERSE BE OUT
+
          }
 +
        ]
 +
      }
 +
    }
 +
  ]
 +
}
 +
</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 ==
 +
h-product properties, inside an element with class '''h-product''':
 +
* '''<code>p-name</code>''' - name of the product
 +
* '''<code>u-photo</code>''' - photo of the product
 +
* '''<code>p-brand</code>''' - manufacturer, can also be embedded <code>h-card</code> {{main|h-card}}
 +
* '''<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, optionally embedded <code>h-review</code> {{main|h-review}}
 +
* '''<code>p-price</code>''' - retail price of the product
 +
 
 +
== Status ==
 +
 
 +
'''h-product''' is a microformats.org draft specification. Public discussion on h-product takes place on [[h-product-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.
 +
 
 +
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 ==
 +
* Barnaby Walters’ [http://waterpigs.co.uk/notes/new/ 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
 +
 
 +
== Validating ==
 +
{{h-spec-section-validating}}
 +
 
 +
== 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:
 +
 
 +
<source lang=html4strict>
 +
<div class="h-product hproduct">
 +
  <h1 class="p-name fn">Product Name</h1>
 +
</div>
 +
</source>
 +
 
 +
=== 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)
 +
 
 +
* <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>
 +
 
 +
== Background ==
 +
 
 +
h-product is based on the existing [[hProduct]] specification.
 +
 
 +
== See Also ==
 +
* [[h-product-feedback]]
 +
* [[microformats2]]
 +
* [[h-card]] can be embedded in h-product
 +
* [[hProduct]] is the classic microformat replaced by h-product
 +
 
 +
[[Category:Draft Specifications]]

Latest revision as of 16:23, 18 July 2020

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.

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 2021-01-24, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0.

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</data>
     from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a>
  </p>
</div>

Parsed JSON:

{
  "items": [
    {
      "type": [
        "h-product"
      ],
      "properties": {
        "name": [
          "Microformats For Dummies"
        ],
        "photo": [
          "http://example.org/mfd.png"
        ],
        "description": [
          {
            "value": "Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!",
            "html": "<p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>"
          }
        ],
        "price": [
          "20.00"
        ],
        "brand": [
          {
            "value": "ACME Publishing inc.",
            "type": [
              "h-card"
            ],
            "properties": {
              "name": [
                "ACME Publishing inc."
              ],
              "url": [
                "http://example.com/acme"
              ]
            }
          }
        ]
      }
    }
  ]
}

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

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-card
    Main article: 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, optionally embedded h-review
    Main article: h-review
  • p-price - retail price of the product

Status

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

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

  • 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

Validating

Main article: microformats 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>
</div>

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)

  • 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

Background

h-product is based on the existing hProduct specification.

See Also