Menu
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.
635
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.
87
A data-* attribute contains no semantic value; it only allows scripts to access data from the markup. Therefore, the data-role attribute (not to be confused with the role attribute) is only relevant for jQuery Mobile.
The header element has semantic meaning, but if you are to use it in a jQuery Mobile application, you will need to also use data-role="header".
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
