한 번에 화면에 보여질 내용을 페이지에 담아야 한다. 페이지는 <body> 요소의 내부에 정의되는데 각각의 페이지에 해당하는 요소(주로, <div>)의 속성에 data-role="page"를 추가해서 지정한다. 다음 예에서는, HTML5의 요소를 활용할 것이므로 <section>을 사용하도록 하겠다.
<section
data-role="page">
…
</section>
페이지의 내부에는 유효한 HTML 요소들이 올 수 있지만, 일반적으로 영역을 구분하기 위해서 헤더, 컨텐트, 푸터가 페이지의 자식으로 사용된다. 각각의 영역은 data-role 속성값에 header, content, footer를 지정한다. 아래 예에서는, <div>를 사용해도 되지만, 각각 <header>, <article>, <footer>를 사용했다.
<section
data-role="page">
<header
data-role="header">...</header>
<article data-role="content">...</article>
<footer data-role="footer">...</footer>
</section>
그러면, 기본적인 시작 템플릿은 다음과 같이 구성될 것이다. 모바일 웹 페이지를 만드려고 할 때 아래의 템플릿을 복사해서 텍스트 에디터에 붙어 놓는 것으로부터 시작하면 편리할 것이다. 각 영역의 내부에는 유효한 HTML 요소들로 내용을 꾸며 넣으면 된다.
<!DOCTYPE
html>
<html>
<head>
<title>기본
틀</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"
/>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
type="text/javascript"
src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<section
data-role="page">
<header
data-role="header">
<h1>머릿말은
여기에</h1>
</header><!--
/header -->
<article data-role="content">
<p>여기에
페이지의 내용을 적는다.</p>
</article><!-- /content -->
<footer
data-role="footer">
<h4>꼬릿말은
여기에</h4>
</footer><!--
/footer -->
</section><!-- /page -->
</body>
</html>
