recipe-examples

Recipe Examples

Per the microformats process this is an examples page documenting existing real world examples of actual tasty recipes published on the Web. See also recipe-brainstorming.

Contributors

• Tantek Çelik
• Robert Bachmann

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

Individuals

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

A Moroccan-ish Casserole

Simon Wheatley

• Structured semantic XHTML based, as well as possible, on hcard/review type principles
• Composed of:
  • title
  • description
  • number of servings (quantity)
  • prep time
  • cooking time
  • approval rating (from hreview)
  • ingredients
  • preparation steps

May expand to include: variation suggestions

Fruit Salad

fruit salad (Mark Pilgrim)

Extremely detailed instructions.

• Composed of (at least)
  • title of recipe
  • description
  • number of servings (quantity)
  • shopping instructions
  • ingredients
  • ingredients to avoid
  • preparation steps
  • left-over preservation instructions

Perfect Flank Steak

John C. "CSS is a series of tubes" Dvorak

• Composed of
  • title of recipe
  • description
  • ingredients
  • preparation steps
  • suggested accompaniments

Services

allrecipes.com - Sachertorte

Sachertorte (allrecipes.com)

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

BBC Food - Marzipanned fruit cake

Marzipanned fruit cake BBC Food Recipes

• Composed of (all B&BR markup)
  • title of recipe
  • name of submitter/source
  • servings count/quanity
  • preparation time
  • cooking time
  • image
  • suitable for vegetarians icon
  • description of recipe
  • ingredients list
  • method steps
  • notes

cooking.com - Jamaican Chicken Stew Recipe

Jamaican Chicken Stew Recipe (cooking.com)

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

cuzza.com - Chicken Jalfrezi Recipe

Chicken Jalfrezi Recipe (cuzza.com)

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

epicurious.com - Moroccan Braised Beef

Moroccan Braised Beef (epicurious.com)

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

extratasty.com - Cuba Libre

Cuba Libre (extratasty.com)

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

recipesource.com - Cranberry Cherry Relish

CRANBERRY CHERRY RELISH (recipesource.com)

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

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 represents the 80/20 of common properties of the examples and reuses terms from existing widely implemented recipe formats.