h-recipe

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

---

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

h-recipe is the microformats-2 replacement for hRecipe.

Example

Here is a simple minimal recipe example:

<article class="h-recipe">
  <h1 class="p-name">Bagels</h1>
  
  <ul>
    <li class="p-ingredient">Flour</li>
    <li class="p-ingredient">Sugar</li>
    <li class="p-ingredient">Yeast</li>
  </ul>
 
  <p>Takes <time class="dt-duration" datetime="1H">1 hour</time>,
     serves <data class="p-yield" value="4">four people</data>.</p>
  
  <div class="u-instructions">
    <ol>
      <li>Start by mixing all the ingredients together.</li>
    </ol>
  </div>
</article>

Get started

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

p-name, e-instructions, p-ingredient and the other property classnames listed below define elements as properties of the h-recipe.

See microformats-2-parsing to learn more about property classnames.

Properties

properties:

• p-name - the name of the recipe
• p-ingredient - describes one or more ingredients used in the recipe.
• p-yield - Specifies the quantity produced by the recipe, like how many persons it satisfyies
• e-instructions - the method of the recipe.
• dt-duration - the time it takes to prepare the meal described by the recipe.
• u-photo - an accompanying image

Experimental properties with wide adoption

• p-summary - provides a short summary or introduction
• p-author - the person who wrote the recipe with h-card
• dt-published - the date the recipe was published
• p-nutrition - nutritional information like calories, fat, dietary fiber etc.
• ...

For backward compatibility, microformats 2 parsers SHOULD detect the following root class name and property names. A microformats 2 parser may use existing microformats parsers to extract these properties. If an "h-recipe" is found, don't look for an "hrecipe" on the same element.

compat root class name: hrecipe
properties: (parsed as p- plain text unless otherwise specified)

• fn - parse as p-name
• ingredient
• yield
• instructions - parse as e-
• duration - parse as dt-
• photo - parse as u-
• summary
• author - including compat root vcard in the absence of h-card
• nutrition

Status

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

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

Property Details

(stub, add any property explanations here)

dt-duration should be marked up using the duration microsyntax defined in HTML5. TODO: add more examples

hRecipe has a number of experimental properties which have real world adoption due to Google recipe search support of hRecipe. These are: summary, author, published and nutrition.

Examples in the Wild

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

Background

h-recipe is based on the existing hRecipe specification.

See Also

• h-recipe-feedback
• microformats-2
• h-card can be nested in h-recipe
• hRecipe is the classic microformat replaced by h-recipe