Creating a Page in Jquery Mobile

Jquery mobile provides a data-role attribute to create a page, its header, section, footer, etc. The attribute is used with a DIV element. For example:- <div data-role="page"></div>

data-role attributes

data-role="value"	Use
data-role="page"	Creates a page that will contain a header, footer, and content area.
*data-role="header"*	Used for header
*data-role="main"*	The content of the mobile application goes in this section.
*data-role="footer"*	Used for footer

Create a page in Jquery mobile

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

Create a header in jquery mobile page

Use heading tags (H1 to H6) for header content.

<div data-role="page">
    <div data-role="header"><h1>This is header</h1></div>
  </div>

Create section area in Jquery mobile page

The class class="ui-content" adds some padding in the section of a webpage to give a better look at the text.

<div data-role="page">
    <div data-role="header"><h1>This is header</h1></div>
    <div data-role="main" class="ui-content">
      <p>Content area</p>
    </div>
</div>

Create a footer in Jquery mobile page

Similarly to header, use H1 to H6 heading tags to write footer content.

<div data-role="page">
    <div data-role="header"><h1>This is header</h1></div>
    <div data-role="main" class="ui-content">
      <p>Content area</p>
    </div>
    <div data-role="footer"><h2>This is footer</h2></div>
  </div>

Final Code

<!DOCTYPE html>
<html>
<head>
  <title>Jquery Mobile</title>
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>

  <div data-role="page">
    <div data-role="header"><h1>This is header</h1></div>
    <div data-role="main" class="ui-content">
      <p>Content area</p>
    </div>
    <div data-role="footer"><h2>This is footer</h2></div>
  </div>

</body>
</html>