Add an example of dl+div with microdata

source

@@ -17982,6 +17982,64 @@ first matching case):</p>
 &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>