title: Mobile Web App: <header> vs <div data-role="header">. What is the difference?
body: <p>I'm doing mobile web application with HTML5 and jQuery mobile. 
  <a href="http://html5boilerplate.com/mobile" rel="noreferrer">HTML5 Mobile Boilerplate</a> suggests this:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="container"&gt;
      &lt;header&gt;
  
      &lt;/header&gt;
      &lt;div id="main" role="main"&gt;
  
      &lt;/div&gt;
  
      &lt;footer&gt;
  
      &lt;/footer&gt;
    &lt;/div&gt; &lt;!--! end of #container --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>On <a href="http://jquerymobile.com/test/docs/pages/page-anatomy.html" rel="noreferrer">jQuery mobile (Section "Putting it together: Basic single page template")</a> it is suggested</p>
  
  <pre><code>&lt;body&gt; 
      &lt;div data-role="page"&gt;
  
          &lt;div data-role="header"&gt;&lt;/div&gt;
  
          &lt;div data-role="content"&gt;&lt;/div&gt;
  
          &lt;div data-role="footer"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Which way is more preferable? 
  What is the difference between <code>&lt;header&gt;</code> and <code>data-role="header"</code>? </p>
  
  <p>I did try googling for that, but no answer so far.</p>