jQuery Mobile and Semantics
jQuery Mobile and Semantics
Join the DZone community and get the full member experience.Join For Free
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:
jQuery Mobile with divs
<div data-role="page" id="page" > <div data-role="header"> <h1>Page</h1> </div> <div data-role="content"> <p>Hey! Here's more</p> </div> <div data-role="footer"> <h1>Stuff</h1> </div> </div>
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.
jQuery Mobile with Semantic Elements
<section data-role="page" id="second" > <header data-role="header"> <h1>Second Page</h1> </header> <article data-role="content"> <p>Hey! Here's more</p> </article> <footer data-role="footer"> <h1>Second Page</h1> </footer> </section>
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.
Opinions expressed by DZone contributors are their own.