jQuery Mobile and Semantics

I’ve been fooling around with jQuery Mobile, and I really like what it’s capable of accomplishing. However I’ve had one nagging gripe with it. The amount of <div>s you end up creating. Most of the sample code looks like this:

 

http://snipplr.com/js/embed.js
http://snipplr.com/json/61645

That’s a crap ton of <div>s for just one view. Not that there’s anything wrong with
<div>s. It’s just you get this many on the page and things start being hard to keep track of. “Is this the <div> that closes the header, the footer, the content, or the page?”

 

HTML5 added all of the cool new semantic elements like <header>, <footer>, and <article>, which help you describe your content better. It would be cool if you could use them with jQuery mobile. The data-role attribute still makes sense because as elements there can be more than one of them on a page–for example, a page header and an article header.

This is especially weird when you consider that “data-role” itself is an HTML5 construct. So why do we have to use <div>s everywhere? You don’t. Something that wasn’t entirely obvious to me before I tested it out is that you can totally use the new HTML semantic elements in your code, as it would appear jQuery mobile only cares about the data-role attribute when it comes to picking out your application elements. In retrospect it makes sense. Doing nothing but
<div>s in example code simplifies things, but it can be done much more semantically if you want.

 

http://snipplr.com/js/embed.js
http://snipplr.com/json/61647

Now, to be clear, I’m not saying I recommend you mark up your code this way in all cases. I’d say a page could be considered a <section>
as it is a collection of related elements, but
<div> is pretty much just as correct. With headers and footers, it makes a lot of sense to use them. The whole <header data-role=”header”> might seem a bit redundant to some, but it beats a crap ton of <div>s in my book. Finally, only really makes sense if the content is standalone.

 

So I don’t think everyone should run out and do this. And I haven’t tested it out more rigorously than just a rudimentary proof of concept. But I’m going to do this, because I really like it.