From Microformats Wiki
Revision as of 10:29, 20 March 2006 by RichardRutter (talk | contribs)
Jump to navigation Jump to search

Recipe Examples


Recipe Lists

  • Steve and Aytek's recipes. Note that they are simply using XOXO for the lists. It doesn't appear that anything more is necessary for a list of recipes.
  • ...
  • ...

Recipes Examples

Lentil Stew

Neriman’s Mercimek - Yummy Lentils

  • Appears to be a simple BBEdit 5.0 conversion of a plain text file into HTML 3.2
  • Uses <br><br> to delimit sections
  • Composed of:
    • author of recipe
    • title of recipe, with English translation
    • top level structure of time/instructions, with ingredients noted as necessary for each step
    • serving suggestion(s) (serve with ...)

Mocha Brownie Cake

Mocha Brownie Cake

  • Composed of
    • title of recipe / food item (looks like a heading)
    • sequence of larger tasks (separated by subheadings), each of which has
      • list of ingredients (uses <ul>) for a particular component of the dish
      • preparation instructions for those ingredients
      • OR a instructions for assembling components of the dish
    • contributing baker - perhaps someone who has modified the recipe?
    • source - citation of where recipe originally came from


Sachertorte (

  • Composed of
    • title of recipe (as a heading)
    • name of the submitter
    • description of the food item (e.g: "Elegant chocolate cake.")
    • optional photo
    • servings count
    • sequence of ingredients (uses <ul>)
    • sequence of preperation instructions (uses <ol>)

Cuba Libre

Cuba Libre (

  • Composed of
    • title of recipe
    • name of the submitter
    • sequence of ingredients
    • preperation instructions (continuous text)
    • Recipe rating (US school grad system)

Moroccan Braised Beef

Moroccan Braised Beef (

  • Composed of
    • Recipe Intro Area
      • Photo (uses <p>)
      • Recipe Title (uses <h1>)
      • Quick intro description (No <p>)
    • Ingredients * (uses <br>)
    • Preparation *
      • Preparation instructions (some recipes offer Cooks' notes: - surrounded by *b* tagset, and uses <br> )
      • Serving size
      • Origin (span class = source, magazine title)
      • Copyright info (span class = copyright: publication date and location if available)
    • Your notes * (user/visitor may add/submit notes to appear on their printed copy)
    • Reviews * (fork ratings, 1-4)

Notes: Images are the secondary headings * (class = hdr) , no sub heading markup. Recipes do not use use <li> and use <br> instead of <p> often.

Jamaican Chicken Stew Recipe

Jamaican Chicken Stew Recipe (

  • Consists of
    • Recipe Title (<font><b> used for header)
      • Source (Magazine, book, title, etc. with a link.)
      • Serving Size
    • Photo area
      • Recipe Email, Save, Print options
      • Photo
    • Recipe Ingredients (heading uses <b> <br>, each ingredient in separate <td>, ingredient keywords linked to a glossary)
    • Recipe Method (no <p> used, uses <td>, <font> and <br>)
      • Copyright reprint info appears at end of prep info.
    • Nutrition Facts (<font><b> used for header)
      • Serving size info repeated
      • Nutritional elements per serving (each item and value are in separate <td>)

Notes: No meaningful markup used. Recipes use <table> for all layout/presentation. <b>, <br>, and nested <font> used throughout. Line images separate sections of recipe.

Cranberry Cherry Relish


  • Consists of
    • Exported info (if from mastercook, mealmaster)
    • Title (in uppercase)
    • Recipe by: (source, author info)
    • Serving size: Preparation Time:
    • Categories:
    • Ingredients ( displayed in columns: Amount : Measure : Ingredient -- Preparation Method )
    • Cooking Instructions

Note: Recipe is in text format using <pre> inside a <td>.

Chicken Jalfrezi Recipe

Chicken Jalfrezi Recipe (

  • Consists of
    • Recipe Title (<h2>)
      • Subheading/summary description (<h3>)
      • Teaser text with photo (<div class="teaser"><div class="mainImg">)
    • Method steps (each step in a <div class="step"> with an image and text)
    • Number of servings (<h5>)
    • Ingredients list (in a definition list; quantities and units not marked up separately; some ingredients link to an explanatory page)
    • "Chef's notes". Explanatory notes offering advice and alternatives.

Next Steps

  1. Add more examples and analysis of their markup and implied schemas
  2. Research existing recipe-formats (Mealmaster, RecipeML, ...)
  3. recipe-brainstorming on a minimal recipe schema that solves the 80/20 of examples