Anatomy of a Page

Following HTML markup conventions is essential to this approach because markup is the primary mechanism used to configure the mobile experience in jQuery Mobile. Validate your code and always avoid the use of inline styles or inline JavaScript event handlers to ensure the best results.

Mobile page structure

A jQuery Mobile site starts with an HTML5 'doctype'. In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off:

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8" /> 
		<title>Page Title</title> 
		<link rel="stylesheet" type="text/css" href="ui-theme.css" /> 
		<script type="text/javascript" src="jquery-min.js"></script> 
		<script type="text/javascript" src="jquery-mobile-min.js"></script> 
	</head> 
	<body> 
        ...
	</body> 
</html>

Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute:

<div data-role="page"> 
	...
</div>

Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".

<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div>

Complete single page template

Putting it all together, this is the standard boilerplate page template you should start with:

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8" /> 
		<title>Page Title</title> 
		<link rel="stylesheet" type="text/css" href="ui-theme.css" /> 
		<script type="text/javascript" src="jquery-min.js"></script> 
		<script type="text/javascript" src="jquery-mobile-min.js"></script> 
	</head> 
	<body> 
		<div data-role="page"> 
			<div data-role="header">...</div> 
			<div data-role="content">...</div> 
			<div data-role="footer">...</div> 
		</div>
	</body> 
</html>