Mobile Web App: <header> vs <div data-role = "header">. What is the difference?
I am engaged in a mobile web application using HTML5 and jQuery mobile. The HTML5 Mobile Boilerplate offers the following:
<body>
<div id="container">
<header>
</header>
<div id="main" role="main">
</div>
<footer>
</footer>
</div> <!--! end of #container -->
</body>
On jQuery mobile ("Merge: Basic One Page Template" section) is offered
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
</body>
Which method is more preferable? What is the difference between <header>and data-role="header"?
I tried google search but no answer yet.
+5