Mobile Web App: <header> vs <div data-role="header">. What is the difference?
I'm doing mobile web application with HTML5 and jQuery mobile. HTML5 Mobile Boilerplate suggests this:
<body>
<div id="container">
<header>
</header>
<div id="main" role="main">
</div>
<footer>
</footer>
</div> <!--! end of #container -->
</body>
On jQuery mobile (Section "Putting it together: Basic single page template") it is suggested
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
</body>
Which way is more preferable?
What is the difference between <header> and data-role="header"?
I did try googling for that, but no answer so far.
Answer
The data-* attributes are for providing information for scripts on your website. They have no wider semantic purpose outside of providing that data to your scripts, it only means something in your page on your site.
The <header> element is an HTML5 element which is defined to mean 'a group of introductory or navigational aids' in the HTML5 specification. It means the same thing in all HTML documents everywhere.
You should use header, providing your target audience has HTML5 capable browsers and what you are marking up is a header. You could additionally use data-* attributes like this:
<header data-role="header"></header>
It shouldn't really make any difference to jQuery mobile what elements are used.