Mobile Web App: <header> vs <div data-role="header">. What is the difference?

Asked 12/7, 2012 at 16:7 Answered 12/7, 2012 at 17:55

Solved html jquery-mobile mobile-application

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.

Mercymerdith answered 12/7, 2012 at 16:7 Comment(0)

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.

Hillell answered 12/7, 2012 at 17:47 Comment(4)

Believe it or not, <header> only applies to sectional elements. The header of a page isn't supposed to be marked as <header> (per the spec). – Senn 12/7, 2012 at 18:33

@VinnyBurgh Can you point out where in the spec it says that? One of the examples in the spec (which I linked to) uses header as a child of body. – Hillell 12/7, 2012 at 18:43

@VinnyBurgh w3.org/TR/html5/sections.html#sections - first element that is a section: the body element. – Hillell 12/7, 2012 at 18:48

@VinnyBurgh If you really want to be convinced, go to the WHATWG edition of the spec, do a view source and have a look at what the first element in the body is. – Hillell 12/7, 2012 at 18:54

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".

Degreeday answered 12/7, 2012 at 17:55 Comment(1)

Thanks. After reading a few articles I got hang of data-* attributes. – Mercymerdith 13/7, 2012 at 16:45

Recommended topics

Hot tags