HTML5 has recently started to receive more media and consumer attention, in part due to Apple's lack of support for Adobe Flash across their various mobile devices, the iPad, iPhone and iPod Touch. Apple claims that Flash is a closed system and instead favors more open standards such as HTML5, CSS and JavaScript for its devices (and of course custom applications written specifically for their platforms). We are going to explore HTML5 through a series of blog posts that discuss what it is and what it means for your digital presence from web sites to mobile devices.
What is HTML5?
When you hear HTML, you may think of web sites and web pages and the underlying code used to mark up the content displayed on those pages. Yet HTML5 is far more than a simple markup coding language - rather, it’s a variety of new (and old) technologies that are bundled under the same label. This generation provides new features that enables more robust web applications and formally documents a number of defacto standards that have been in use for years.
It does introduce new “tags” for marking up content:
- Semantic tags - <section>, <nav>, <article>, <aside>, <hgroup>, <header>, <footer>, etc.
The advantage of using these specific tags is that search engines will be able to more efficiently and accurately index your web content.
- Multimedia tags - <video> and <audio> for embedding such content without the use of any third-party plugins.
Several form improvements, none of which are groundbreaking ideas but rather formalize what has been done for years with many third-party web application frameworks. For instance:
- input types e.g. telephone, url, email, date, etc.. Many of these new types bring more meaningful value to the input, which will help with accessibility and allow the web browser to provide a better and more consistent user interface when used.
- New attributes for the <input> tag include autofocus, required and placeholder. Autofocus provides an easier way to set focus to a specific field on a form, required is self-explanatory, and placeholder allows the page author to provide a hint to the end user for filling in the field.
Notable HTML4 tags are being phased out, including:
- <font>, <center> and <u> as each of these serve only presentational use better handled by CSS.
- <frame> and <frameset> because their usage negatively affects web accessibility and overall usability.
HTML5 encompasses much more than just new and deprecated tags:
- Changes in video encoding standards so that video can be viewed across all kinds of devices
- New methods for font embedding so that your brand can be more closely represented online
- 2D drawing using the <canvas> tag
- Improved browser DOM (Document Object Model)
- CSS3
- An offline data store, allowing a web application to persist data in local storage with of course the “same origin” security policies in place.
- Geolocation with consent from the user allows a web application to find the location of the user allowing developers to more readily contextualize content to their specific location.
- How markup errors are handled.
- Web Workers, a standard for support of placing long running processes into the background without locking up the web browser.
- Microdata functionality that provides a means of embedding semantic meaning into existing tags.
- Web Sockets which can best be described as Ajax on steroids.
Who is using HTML5?
Google recently launched a beta showcase of HTML5 video capability on its YouTube site at
http://www.youtube.com/html5/. Apple also features a showcase of HTML5 and CSS capabilities at
http://www.apple.com/html5/. Surprisingly, even though Apple claims it prefers HTML5 since it will be an open standard, their showcase is coded to only be available with their Safari web browser. By doing this, Apple demonstrates the true current state of HTML5: it may be open, but it’s not yet a fully-formed standard and is subject to vendor-specific interpretation and extension. Browser vendors are clearly putting their own proprietary spin on what they anticipate HTML5 and associated technologies will be, much like Netscape and Microsoft did with earlier standards back in the late 1990s. Google thus far is arguably a better example of openness, since its HTML5 content on YouTube is readily viewable in the latest versions of Firefox, Safari, Opera and of course Chrome.
So besides browser vendors, who else is using HTML5 at this point? A growing number of web sites are starting to implement some of its more stable and well defined standards. The web site html5gallery.com currently has just fewer than 500 web sites listed. Getting added to their catalog means your web site must use the HTML5 document type and must use some of the new tags and technology. Overall though, the number of sites listed is relatively minor when you consider the millions of web applications on the Internet.
The White Elephant in the Room
Microsoft's Internet Explorer thus far lags behind all other major browser vendors in its support of the emerging HTML5 standards. This entry on Wikipedia
comparing the 4 major web browser layout engines makes this plenty clear. At the same time, IE still remains at the top of the list according to recent
market share numbers. In Microsoft’s defense, at least they are not attempting to guess at the HTML5 standard much like they did in the past when they and Netscape had competing visions and proprietary features of the then-in-progress standards. Thankfully, with the upcoming Internet Explorer 9 Microsoft appears to be committed to supporting many of the W3C standards as a recently launched
Testing Center micro site shows.
Tools Anyone?
OK, so IE is still the most used browser on the Internet and to date has little support for HTML5. What else is slowing adoption of HTML5? Productivity tools for developers. Adobe Flash, Adobe Flex and Microsoft's Silverlight all have rich toolsets for developing compelling, immersive experiences. Development environments for implementing rich interfaces with current Ajax technology are more mature and polished. HTML5, on the other hand, is new and can require writing far more code to produce even the simplest effects easily accomplished with Flash. Writing more code means more time and more testing (and longer term higher maintenance costs), not to mention fewer web browsers that consistently support it.
What about now?
The good news is HTML5 is not a future technology; HTML5 is here today. Once IE 9 is released, all major browsers will support a large subset of HTML5 features. So what does this mean for you and your online presence? What parts of HTML5 should you adopt and make part of your web and mobile online initiatives? When should you consider making steps towards HTML5-based online applications, today, this year, or in the coming years?
These are the questions we will help you answer in future blog posts in this series.
