Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery Mobile and Semantics

DZone's Guide to

jQuery Mobile and Semantics

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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.

 

Source: http://www.terrenceryan.com/blog/post.cfm/jquery-mobile-and-semantics

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}