Pages

Pages are the main unit within jQuery Mobile. The jQuery Mobile framework can support single pages or multiple internally-linked pages within one page (this may sound confusing right now, but you'll see shortly).

Pages themselves are made up of three components: header, content, and footer. Remember, as we mentioned previously, jQuery Mobile does not use the common HTML5 structure elements, so you will instead use these header, content, and footer implementations so that you can ensure the most cross-browser compatibility as you can.

Let's see an example of a page:

<div data-role="page">
  <div data-role="header">
    <!-- Header stuff -->
  </div><!-- /header -->

  <div role="main" class="ui-content">
    <!-- Content -->
  </div><!-- /content -->

  <div data-role="footer">
    <!-- Footer stuff -->
  </div><!-- /footer -->
</div><!-- ...