A First Example
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.
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:
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:
header tag wraps the header of the page.
- The main navigation items are wrapped with a
article tag wraps the main content, while an
aside tag wraps the sidebar content.