Let's take a first look at some code. When viewed on a smartphone, the page WhatIsjQueryMobile/Demos/helloworld/index.html looks something like this:
Open the page in a desktop browser and with a smartphone or emulator. Open up the page in a file editor, too, to check out the code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile: Hello World</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <!-- the "page" div is the basic unit of jQuery Mobile - a page for the user --> <div data-role="page"> <!-- this is a header, appearing at the top of the page --> <div data-role="header" data-position="inline"> <h1>Hello World</h1> </div> <div class="ui-content" role="main"> <p>A first jQuery Mobile page.</p> <!-- this is a button --> <a href="http://api.jquerymobile.com/" class="ui-btn">Home</a> </div> </div> </body> </html>
While we'll get into lots more detail about code later in this course, we can point out a few things now. First, note that the page is a valid HTML5 document. The DOCTYPE is html. Some divs on the page make use of the HTML5 data attribute. The outermost div, for instance, has attribute data-role="page", which is significant for jQuery Mobile; we'll learn later in the course about divs as pages.
Let's check jQuery Mobile's progressive enhancement features. Consider the following two screenshots, each showing WhatIsjQueryMobile/Demos/helloworld/index.html in Google Chrome on a Mac:
Let's take a look at a quick first example - open up WhatIsjQueryMobile/Demos/html5/index.html in a browser and in your file editor to inspect the code. From a desktop browser you'll see something like this:
<!doctype html> <html> <head> <title>A Simple Document</title> </head> <body> <header> <h1>Site Title</h1> <nav> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </nav> </header> <section> <article> <h1>Page Title</h1> <h2>Subtitle</h2> <p>Content content content</p> </article> </section> <aside> <p>Sidebar info goes here</p> </aside> <footer>Footer content here</footer> </body> </html>
Presentationally, the page is less than stunning when viewed in a browser - we've not styled the elements at all - but the interesting bits are how we've marked up the content. Firstly, note that we've declared a
html - this fact alone means this page is an HTML5 document.
Secondly, note that we have made use of the HTML5 semantic tags to imply meaning to the content we markup for viewing on the web:
headertag wraps the header of the page.
articletag wraps the main content, while an
asidetag wraps the sidebar content.