From 280785401785239f059061eed79f073662bcc49e Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Mon, 24 Oct 2016 13:48:03 +0200
Subject: [PATCH] Add an example of dl+div with microdata

---
 source | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/source b/source
index 3d5eeb3b002..a9d2fe975b6 100644
--- a/source
+++ b/source
@@ -17982,6 +17982,64 @@ first matching case):&lt;/p&gt;
 &lt;/dl></pre>
   </div>
 
+  <div class="example">
+
+   <p>This example uses <span>microdata</span> attributes in a <code>dl</code> element, together
+   with the <code>div</code> element, to annotate the ice cream desserts at a French restaurant.</p>
+   <!-- https://commons.wikimedia.org/wiki/File:Carte_des_desserts_2012_des_cafétérias_Toquenelle_(1).jpg -->
+
+   <pre lang="fr">&lt;dl>
+ &lt;div itemscope itemtype="http://schema.org/Product">
+  &lt;dt itemprop="name">Café ou Chocolat Liégeois&lt;/dt>
+  &lt;dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+   &lt;span itemprop="price">3.50 €&lt;/span>
+  &lt;/dd>
+  &lt;dd itemprop="description">
+   2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
+  &lt;/dd>
+ &lt;/div>
+
+ &lt;div itemscope itemtype="http://schema.org/Product">
+  &lt;dt itemprop="name">Américaine&lt;/dt>
+  &lt;dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+   &lt;span itemprop="price">3.50 €&lt;/span>
+  &lt;/dd>
+  &lt;dd itemprop="description">
+   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
+  &lt;/dd>
+ &lt;/div>
+&lt;/dl></pre>
+
+   <p>Without the <code>div</code> element the markup would need to use the <code
+   data-x="attr-itemref">itemref</code> attribute to link the data in the <code>dd</code> elements
+   with the item, as follows.</p>
+
+   <pre lang="fr">&lt;dl>
+  &lt;dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
+   &lt;span itemprop="name">Café ou Chocolat Liégeois&lt;/span>
+  &lt;/dt>
+  &lt;dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+   &lt;span itemprop="price">3.50 €&lt;/span>
+  &lt;/dd>
+  &lt;dd id="1-description" itemprop="description">
+   2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
+  &lt;/dd>
+
+ &lt;div>
+  &lt;dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
+   &lt;span itemprop="name">Américaine&lt;/span>
+  &lt;/dt>
+  &lt;dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+   &lt;span itemprop="price">3.50 €&lt;/span>
+  &lt;/dd>
+  &lt;dd id="2-description" itemprop="description">
+   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
+  &lt;/dd>
+ &lt;/div>
+&lt;/dl></pre>
+
+  </div>
+
   <p class="note">The <code>dl</code> element is inappropriate for marking up dialogue. <a
   href="#conversations">Examples of how to mark up dialogue</a> are shown below.</p>