以下jQueryモバイルの基本構文です。（HTML5の記述での構文）
１つのHTMLファイルで複数ページ、ダイアログ、ポップアップ、サイドパネル等を含んで記述しています。
また、メインのページ（page1）にはヘッダー、フッター、コンテンツを含んでいます。
コンテンツにはダイアログ、ポップアップ、サイドパネルへのリンクを含み、フッターにはナビゲーションバーを含んでいます。
ヘッダーでjQueryおよびjQueryMobileをロードします。
Viewportを別途に指定する場合はjQueryMobileをロードしてから設定する必要があります。
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タイトル</title>
<!-- IEを常に互換モードにしない（標準モードへ） -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- jQueryMobileのCSSの読み込み フォルダは読み替えてください -->
<link rel="stylesheet" href="js/jquery_mobile/jquery.mobile-1.4.5.min.css" />
<!-- jQueryの読み込み フォルダは読み替えてください -->
<script src="js/jquery/jquery-2.1.3.min.js"></script>
<!-- jQueryMobileの設定を変更する場合は以下スクリプト内で行う -->
<script>
$(document).on("pageinit","#page1",function(){
//ページが初回に読み込まれたとき１回だけ実行するスクリプトを記述
//ajaxを無効にする
$.mobile.ajaxEnabled = false;
});
$(document).on("pageshow","#page1",function(){
//ページが表示されるたびに実行するスクリプトを記述
});
</script>
<!-- jQueryMobileの読み込み フォルダは読み替えてください -->
<script src="js/jquery_mobile/jquery.mobile-1.4.5.min.js"></script>
<!-- ビューポートの指定 headの最後ので示さないと上書きされる -->
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1, minimum-scale=0.25, maximum-scale=3.0">
</head>
<body>
<!-- 最初ページの始まり -->
<div data-role="page" id="page1" data-theme="a">
<!-- ヘッダーの始まり -->
<div data-role="header" data-position="fixed">
<a href="">左端ボタン</a> <!-- ヘッダー内の1つ目のaタグは左端ボタンになる -->
<h3>ヘッダー</h3>
<a href="">右端ボタン</a> <!-- ヘッダー内の2つ目のaタグは右端ボタンになる -->
</div>
<!-- ヘッダーの終わり -->
<!-- コンテンツ（本文）の始まり -->
<div class="ui-content" role="main">
<h2>コンテンツ</h2>
<a href="#panel1" data-icon="bars" data-role="button" data-inline="true">サイドパネルを表示</a><br>
<a href="#dialog1" data-icon="alert" data-role="button" data-inline="true">ダイアログを表示</a><br>
<a href="#popup1" data-icon="info" data-role="button" data-inline="true" data-transition="pop" data-rel="popup" data-position-to="origin">ポップアップを表示</a>
</div>
<!-- コンテンツ（本文）の終わり -->
<!-- フッターの始まり -->
<div data-role="footer" data-position="fixed">
<!-- フッター内のナビゲーションバー始まり ５列以上は下段に並ぶ -->
<div data-role="navbar">
<ul>
<li><a href="button.html" data-icon="info" data-transition="flow">ボタン<br>ウィジェット</a></li>
<li><a href="radio.html" data-icon="gear" data-transition="flow">ラジオボタン<br>ウィジェット</a></li>
<li><a href="check.html" data-icon="check" data-transition="flow">チェックボックス<br>ウィジェット</a></li>
<li><a href="select.html" data-icon="bars" data-transition="flow">セレクトメニュー<br>ウィジェット</a></li>
<li><a href="switch.html" data-icon="minus" data-transition="flow">フリップスイッチ<br>ウィジェット</a></li>
</ul>
</div>
<!-- ヘッダー内のナビゲーションバー終わり -->
</div>
<!-- フッターの終わり -->
<!-- ページがサイドパネルを持つ場合の始まり -->
<div data-role="panel" data-position="right" data-dismissible="true" id="panel1" data-display="reveal" data-position-fixed="true" data-animate="true">
<h3>サイドパネル</h3>
</div>
<!-- ページがサイドパネルを持つ場合の終わり -->
<!-- ポップアップの始まり -->
<div data-role="popup" id="popup1" data-corners="true" data-arrow="t">
<a href="#" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>ポップアップ</p>
</div>
<!-- ポップアップの終わり -->
</div>
<!-- 最初ページの終わり -->
<!-- ダイアログのページの始まり -->
<div data-role="page" data-title="ダイアログ" id="dialog1" data-dialog="true">
<div data-role="header" data-theme="b">
<h2>ダイアログのヘッダー</h2>
</div>
<div class="ui-content" role="main">
<span>ダイアログ表示</span>
<a href="#page1" data-role="button">閉じる</a>
</div>
</div>
<!-- ダイアログのページの終わり -->
<!-- ２ページ目の始まり jQueryMobileでは１つのファイルに複数のページを持つことも出来る -->
<div data-role="page" id="page2" data-theme="b">
<!-- ヘッダーの始まり -->
<div data-role="header">
</div>
<!-- ヘッダーの終わり -->
<!-- コンテンツの始まり -->
<div class="ui-content" role="main">
<h3>２ページ目コンテンツ</h3>
<a href="#page1" data-role="button" data-inline="true">ページ１へ</a>
</div>
<!-- コンテンツの終わり -->
<!-- コンテンツの終わり -->
<div data-role="footer">
</div>
<!-- フッターの終わり -->
</div>
<!-- ２ページ目の終わり -->
</body>
</html>