title: Marking up HTML code with microdata when there are multiple products on a page
body: <p>I have a page which compares 4 products at a time in <strong>parallel tabular form</strong> i.e. It mentions features of each of them one after another. Here is a <a href="http://compare-mobiles.buyhatke.com/Samsung-I9505-Galaxy-S4-Vs-HTC-One-Vs-Apple-iPhone-5-Vs-Sony-Xperia-Z" rel="nofollow">sample page</a> .</p>
  
  <p>I wish to tag these features so that it becomes easier for search engines to interpret. However, in all the examples given <a href="https://support.google.com/webmasters/bin/answer.py?hl=en&amp;answer=146862" rel="nofollow">here</a>, you have to mention all the features of a product at a time in a div. This causes a problem for my case, where I mention the features of product together.</p>
  
  <p>A typical example as given goes like this :-</p>
  
  <pre><code>&lt;div itemscope itemtype="http://schema.org/Offer"&gt;
    &lt;span itemprop="name"&gt;Blend-O-Matic&lt;/span&gt;
    &lt;span itemprop="price"&gt;$19.95&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I would like it to be in this way :-</p>
  
  <pre><code>&lt;div itemscope itemtype="http://schema.org/Offer"&gt;
        &lt;span itemprop="name"&gt;Blend-O-Matic&lt;/span&gt; // Item 1
      &lt;/div&gt;
     &lt;div itemscope itemtype="http://schema.org/Offer"&gt;
        &lt;span itemprop="name"&gt;Blend-O-Matic2&lt;/span&gt; // Item 2
      &lt;/div&gt;
  </code></pre>
  
  <p>Further followed by :-</p>
  
  <pre><code> &lt;div itemscope itemtype="http://schema.org/Offer"&gt;
        &lt;span itemprop="price"&gt;$19.95&lt;/span&gt; // Item 1
      &lt;/div&gt;
     &lt;div itemscope itemtype="http://schema.org/Offer"&gt;
        &lt;span itemprop="price"&gt;$21.95&lt;/span&gt; // Item 2
      &lt;/div&gt;
  </code></pre>
  
  <p>So, in nutshell, is there a way so that I can tag an item with some code and then use it to refer to other details of that item ?</p>
  
  <p>Please comment if I am unclear in asking my doubt !</p>