what is the difference between tag div and tag section for pages in jquery mobile

I saw both div and section been used in data-role="page". For example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>This content will be ignored.</p>
<!-- Begin Page 4 -->
<section id="page4" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>External Page!</p>
<p><a href="#page1">Go to First Page</a>.</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- End Page 4-->
<h3>This content will be ignored as well.</h3>
</body>
</html>

and

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Intro to jQuery Mobile</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
    </head>
    <body>

        <div data-role="page">

            <div data-role="header">
               <h1>Facebook Friends</h1>
            </div><!-- /header -->

            <div data-role="content">

            </div><!-- /content -->

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

    </body>
</html>

What's the difference and what is section used for?Will it prevents load contents in it when it is not shown?

Solution

SECTION is simply an HTML5 tag. Since HTML5 is relatively new, many developers improperly use it, or you'll see only portions of a project updated to use the new tags while the rest continue to use DIV tags. The code that you have provided that uses SECTION does appear to use it in the proper place and context, just to give you an idea.

Check out this brief article on the SECTION tag and when to use it, don't get the idea that SECTION is just a fancy name for DIV: http://www.impressivewebs.com/html5-section/

Also, it never hurts to check out the specs: http://w3c.github.io/html/sections.html#the-section-element

The short answer to your question, though, is that there is no practical difference - a SECTION tag will behave exactly the same as a DIV tag in terms of how CSS affects it and how you work with it from javascript. The real difference is in how the tags are interpreted when a document outline is created, for example, by a feed reader.

The data-* attributes are a new HTML5 addition (article) that allow you to associate arbitrary data with an HTML element. The data within the attributes can be harnessed by javascript to implement features like tooltips or geolocation data. Formerly, such data had involved hidden child elements or JSON data, or a new AJAX request to fetch such data from the server. Now, javascript can simply read these data attributes to get associated data about a given element. I am not certain how exactly your particular script makes use of the data-role attribute, but it doesn't matter if the attribute is on a DIV, a SECTION, an IMG, or a SPAN insofar as the specification goes.