title: Jquery-mobile data-role=content clarification
body: <p>What exactly is the <strong>purpose</strong> for the <code>data-role="content"</code>?
  I'm testing out a few things like animations/transitions etc and so, when I removed that from the container div that had the content, everything still worked.</p>
  
  <p>For example if I do this:</p>
  
  <pre><code>&lt;div id="secondPage" data-role="page"&gt;
      &lt;div data-role="header"&gt;
      &lt;h1&gt;This is page 2 &lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;
         &lt;p&gt;This is page 2 with some regular text here.&lt;/p&gt;
         &lt;p&gt;&lt;a href="#firstPage" data-direction="reverse"&gt;Go to first page.&lt;/a&gt;&lt;/p&gt;&lt;br/&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>it works as it should, but if I then remove the <code>data-role="content"</code> part
  and make it for example like this:</p>
  
  <pre><code>  &lt;div id="secondPage" data-role="page"&gt;
          &lt;div data-role="header"&gt;
          &lt;h1&gt;This is page 2 &lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
             &lt;p&gt;This is page 2 with some regular text here.&lt;/p&gt;
             &lt;p&gt;&lt;a href="#firstPage" data-direction="reverse"&gt;Go to first page.&lt;/a&gt;&lt;/p&gt;&lt;br/&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>it still works so I'm a bit hazy as to the need for it. So whats the point of it? </p>