A typical page will be divided as: header, content, and footer.

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

The header and footer are optional.  All code inside a page must be within one of the 3 sections.

Hiding The Browsers Address Bar

On compatible devices, such as Android-, webOS- and iOS- devices, jQuery Mobile will try to hide the browser’s address bar by manipulating the initial scroll. This hack will only work if the content is tall enough to fit the available space.

Orientation Changes

jQuery Mobile will manage orientation changes between portrait or landscape itself on most devices adapting the UI automatically to the new viewport.

Browser Title

The documents title is the browsers title which will be stored when bookmarking etc.  I fyou want to change it when in different pages within a document use data-title:

<div data-role="page" id="page2" data-title="New Title To Use">

Page Title

Set using the <h1> tag in the header (h1 using the standard stylesheet).  If it doesn't fit on a device it will be auto cropped.

Footer Title Text

Set using the <h4> tag in the footer (h4 using the standard stylesheet).  If it doesn't fit on a device it will be auto cropped.

Multiple Pages Within 1 Document

If there is not dynamic content you can have lots of pages in 1 document and its a balance between the user getting all of the pages in a single download of a file and the file being so big that its slow to download.

Accessing the current page

Use the $.mobile.activePage attribute that is automatically linked to the current visible data-role="page" element. 

	var currentPageId = $.mobile.activePage.id;

You can access the current page container (usually the body element) with the $.mobile.pageContainer attribute.