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 to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}