A First HTML5 Example

Contact Us or call 1-877-932-8228
A First HTML5 Example

A First Example

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:

Basic HTML5 page

Code Sample:

   <title>A Simple Document</title>
    <h1>Site Title</h1>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>

      <h1>Page Title</h1>
      <p>Content content content</p>
    <p>Sidebar info goes here</p>
  <footer>Footer content here</footer>

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 doctype of 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:

  1. A header tag wraps the header of the page.
  2. The main navigation items are wrapped with a nav tag.
  3. An article tag wraps the main content, while an aside tag wraps the sidebar content.