Use section, header and footer tags instead of data role

Question

John Reid, in his jQuery Mobile book, has a good understanding of the use of html5 tags:

<section data-role="page">
<header data-role="header">
<nav data-role="navbar">
<div data-role="content">
<footer data-role="footer">

Q: Is it possible for me to get rid of data-role = "page", "header", "nav", "footer" if I use section, header and footer tags? Maybe I could add some js before jQuery Mobile boots up.

Theoretically, if I added this before downloading jQuery Mobile, this would work:

$('header').attr('data-role','header');

Hm ... I may have to update the elements after applying this attribute. Or call the create method.

Answer 1

I do this before jQuery Mobile JavaScript:

$('section').attr('data-role','page');
$('article').attr('data-role','content');
$('header').attr('data-role','header');
$('nav').attr('data-role','navbar');
$('aside').addClass('ui-li-aside');
$('ul').not('nav > ul').not('.nolst').attr('data-role','listview').attr('data-inset','true');
$('ol').not('nav > ol').attr('data-role','listview').attr('data-inset','true');;
$('a').not('li > a').not('.nobtn').attr('data-role','button');
$('footer').attr('data-role','footer');

Answer 2

data-role = "page" ( ajax),

$(":jqmData(role='page')").live('pagebeforecreate', function(){
    var $page=$(this);
    $page.find("header:not([data-role])").attr('data-role', 'header');
    $page.find("nav:not([data-role])").attr('data-role', 'navbar');
    $page.find("footer:not([data-role])").attr('data-role', 'footer');
}