Three letter blocks spelling out APP

Introduction to HTML5 for Mobile App Development

Get your HTML5 mobile development bearings using this in-depth guide

RELATED:  "HTML5 for the ASP.NET Developer" and "HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas"

HTML5 is the umbrella term for the next major evolution of markup, JavaScript, and Cascading Style Sheets (CSS) for web applications. HTML5 is becoming an ever-more important mobile development technology -- especially in light of Adobe's recent announcement that it's ceasing development on Flash Player for mobile browsers and increasing its investments in HTML5.

In this article, I intend to provide a similarly comprehensive overview of HTML5 with an emphasis on features oriented toward mobile development. We'll dive into some specific examples of HTML5 features and focus specifically on what is available with mobile devices. I will focus on what developers can do today as opposed to what is part of the specific set of standards. I'll also mention where a product may have a slightly different outcome than expected.

Markup

HTML5 introduces many new tags and attributes. In this section, we'll take a look at the ones you as a developer will likely need to use immediately.

HTML5 page. First off, an HTML5 page is much easier to set up than a web page in earlier HTML versions. Previous versions of HTML and XHTML had very complicated XML namespace support that average developers were confused by and honestly didn't pay much attention to. HTML5 has a much simpler page definition and will be simpler for developers to get started with.

Let's look at an HTML5 template, shown in Figure 1, which I created for my HTML5 samples (available for download with the online article; see the top of page for the download button). There are a few items to note in the sample code:

  • The tag is much simpler than we formerly saw in HTML. The tag instructs the browser to run in standards-compliant mode.
  • The tag with the http-equiv attribute instructs the browser to use the most recent version of the HTML engine in the browser. In addition, if the user has the Google Chrome Frame plug-in installed, the Chrome Frame engine is used in Internet Explorer (IE). (See the sidebar "Author's Notes" at the end of this article for more information about Chrome Frame.)
  • The code download includes a set of jQuery and jQuery Mobile CSS and JavaScript libraries. Although use of these libraries is clearly not a strict requirement for HTML5, they will be used to hook into the HTML5 page and provide features that will make development easier.
  • The