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. To bring you up to speed on this crucial aspect of development, DevProConnections has covered HTML5 extensively in recent months, including my article "HTML5 for the ASP.NET Developer." 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 <DOCTYPE/> tag is much simpler than we formerly saw in HTML. The tag instructs the browser to run in standards-compliant mode.
-
The <meta/> 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 <script/> tag does not have the type or language attribute. These attributes are not required for HTML5. There is a new attribute for
the <script/> tag named async. The async attribute allows for the script to be executed asynchronously, or not.
-
The jquery.tmpl.min.js and Google maps files are used for their templating capabilities and are not a requirement for HTML5.
-
Modernizr-2.0.6.js contains the Modernizr development library. Modernizr (modernizr.com) is a JavaScript library that makes development much
easier and simpler when testing browsers as well as when building HTML5 apps. (See Dan Wahlin's article "HTML5 and CSS3 Feature Detection with Modernizr" for more information about Modernizr.)
-
Within the <body/> tag, there are additional content sections. These include the <header/>, <section/>, <article/>,
<footer/>, and other tags. These tags allow for a page to be divided into logical sections that can provide additional information to a page.
Multimedia tags.
The most discussed, and controversial, feature in HTML5 is its support for video, which is provided by the <video/> and <audio/> tags.
Before these tags existed, developers had to opt for building Rich Internet Application (RIA) type of solutions that may have included Silverlight and
Flash to get support for audio and video.
Let's look at the <audio/> tag first. The <audio/> tag offers developers a standardized way to provide audio to web applications. The
following example shows how to use the <audio/> tag:
<audio controls="controls" preload="none" title="HTML5 Audio Example">
<source src="@Href("~")Content/HTML5.mp3" type="audio/mpeg" />
</audio>
As you can see, the <source/> tag indicates that HTML5 supports the .mp3 file type. Various file types can be specified in the <source/>
tag (e.g., .ogg).
HTML5's <video/> tag provides video support. There is a major difference between audio and video in the browser world. With audio, MP3 has
widespread support among the various browsers that developers will encounter. There's no equivalent "default" video format in the marketplace. Figure 2
shows a short example that uses the <video/> tag.
Just as the <audio/> tag does for audio, the <video/> tag provides the basic infrastructure for supporting video. The biggest problem with
the <video/> tag is the lack of agreement by major vendors on which formats they support. I won't bore you with the details of this ongoing
disagreement. But as you can see in the example in Figure 2, you can specify a number of different formats via the <source/> tag.
The biggest problem for developers will be creating the video files in the necessary formats for display to users. And in addition to creating and
specifying the file formats, developers will need to be careful with the MIME types that are loaded and set up on the server. The installation of
Microsoft IIS 7.5 that I used needed to be configured to send these files to the user, so you will most likely need to set up these features. In my
example, I set up the necessary MIME types by adding the entries shown in Figure 3 to the web.config file. I've found two tools very helpful in
creating the video in the necessary format: Firefogg and HandBrake.
Both the <audio/> and <video/> tags and the browsers that support them provide support for JavaScript methods and events. Some of these
methods and events can be used to start playing the multimedia, pause the multimedia, handle the multimedia finishing, and initiate numerous other
changes and events.
Input tags and attributes.
We've had the same set of input tags in HTML for many years. These include <input/>, <select/>, <form/>, and others. These tags have
served us well. We've learned over the past few years that there are numerous user input scenarios that we can optimize. For example, how many times
have you used a text field to allow the user to input a phone number? You may have had to use some logic to limit the input to numbers or another
similar form. It would be nice if we had a tag that was optimized for a phone number. HTML5 provides this along with other new input types. The
following examples demonstrate how to use HTML5 input tags:
<input id="phone" name="phone" type="tel" placeholder="Phone"/>
<input id="email" name="email" type="email" placeholder="Email" autocapitalize="off" />
For a desktop web browser, this may not be a big deal, but for a mobile user, the tel and email input types can be a godsend. The tel type is used as a
hint to the browser to open a keyboard that is optimized for phone input, like the one shown in Figure 4. This keyboard will handle primarily numeric
input. The email type will result in a keyboard being opened that is optimized for inputting an email address.
Figure 4: Keyboard for the input type tel in the Android browser running in the emulator