What is HTML5, and why it will save the web from itself

When Tim Berners-Lee invented the web by linking one document to another — called hypertext — it was a breakthrough. Since then an almost unimaginable pile of functionality has been poured onto the rickety underpinnings of HTML (Hypertext Markup Language) that got the web started. With the advent of Web 2.0, smartphones, and now tablets, the once simple language to run the web has turned into a fractured Humpty-Dumpty of plug-ins, protocols, codecs, incompatible browsers, and platforms.

Every web application developer or content site that wants a top-notch reading experience for its users not only has to take into account several different computer browsers but develop separately for Apple’s mobile devices, Android, and BlackBerry if they want to reach their entire audience. Flash, the most ambitious attempt to span platforms with a single language has run into a wall when it comes to Apple and suffers from being a proprietary solution.

For users the situation is just as frustrating, with a constant trial and error of which applications will run in which browser or on which phone. And for video there is a never-ending hunt for the right player or codec to accomplish what in this age seems like it should be a simple task. Even worse, switching computers or phones or even upgrading to a tablet can mean having to switch applications, another painful and seemingly unnecessary complexity to modern life on the web.

HTML5 is designed to fix all those problems in one grand transition to a massively overhauled version of the web’s most popular language: HTML. The new version makes media — especially video — into a first class citi en, allowing it to be streamed natively without fiddling with plug-ins or rifling through browsers looking for one that works. It also adds true support for web applications, knitting together the hodgepodge of applications environments like JavaScript, Adobe’s Flash, and ActionScript into a unified and universal environment built around an extended JavaScript and CSS (Cascading Style Sheets).

Along with streaming media, the surge in print publications moving to the web is one of the largest trends in online computing. Unfortunately web standards have proven inadequate to the task, requiring the invention of speciali ed reader front ends like inio and Kindle on the PC, and hand-coded applications for smartphones and tablets like those from CNN, the New York Times, and just about every periodical with the resources to hire their own programming team. Hearst has already starting converting maga ines to HTML5 and expects to have most of their transition completed by the end of 2012.

New York Times Chrome Web Store Application written in HTML5

HTML5 adds native tags for common document structures including headers, footers, sections, captions, and figures so that the browser itself will be able to intelligently display multi-page documents without plug-ins or custom applications. A publication will be able to create a single version of their content and have it render effectively across every compliant browser and platform, including phones and tablets. Because HTML5 also standardi es access to user interactions that same content can be fully interactive on every platform.

Web games get a makeover

HTML5 goes beyond simple content display. It can be used to build full-on applications including state of the art games and productivity applications. Tools provided by HTML5 to support game designers start with canvases. The <canvas> tag allows an application to draw directly on the web page using the same drawing commands it would in a native application. This feature more than any other sets HTML5 on a course to replace Flash for many developers looking for a solution that doesn’t require them to work with a proprietary runtime.

Ama ingly there is also a built-in 3D version of <canvas> which uses a language calledWebGL that can be executed in the GPU (Graphics Processing Unit) on systems which have one. So with just a few lines of code on a web page it is possible with HTML5 to create the basics of a 3D environment. Adobe has even offered to provide what it calls CSS Shaders to allow 3D effects to be applied to any web content, not just canvases. HTML5 also offers animation with keyframes, another technology essential to quality gaming, to continue to close the distance between it and Flash.

Sites like html5games provide good examples of what is possible in gaming, and it is only a matter of time before many of the best-selling online games wind up in HTML5 simply because of the convenience of developing a single version that will run on multiple platforms.

HTML5 game Office Snake

Take your web off the grid

A key feature of HTML5 which makes it possible to develop fully functional applications is the addition of local storage capability. Previous generations of web applications either had to store their data in the cloud or in awkward cookies which were severely limited. With HTML5, data such as settings, caches, and databases can easily be stored on the local device. With proper permissions web applications can finally also directly access the local filesystem. To further facilitate local storage HTML5 includes a fully functional relational database which supports SQL.

Of course offline data isn’t truly useful if the application has to be connected just to run. So HTML5 has added the capability for applications to be cached offline and then update themselves from the web when there are newer versions, making it trivial to take your applications with you when you go off the grid. This is a feature already found in native mobile development environments but having it built into the web is a huge leap forward for the usability of web applications.

Another common issue with working on the web is the time spent waiting for data to be retrieved from a remote site. Some browsers and applications have implemented multi-tasking to allow data retrieval to happen in the background but with HTML5 implementing that type of multi-tasking has become a no-brainer using what it calls web workers. It’s easy to have a web worker fill in search results in the background while the user is interacting with the first ones as they arrive.

Making web pages interactive and device friendly

User interaction has always been a weak spot for web pages. The common wisdom has been that once you need interaction that goes beyond text boxes and clicks you need to start writing native code. HTML5 helps address this limitation by adding native drag & drop functionality to the spec — you can drag files to and from your desktop to the browser without today’s current patchwork of plug-ins and uploaders.

HTML5 is also attempting to provide standard ways to use some of the speciali ed capabilities offered in mobile platforms. Access to geolocation data, for example, is standardi ed, as is access to the devices physical position as reported by an accelerometer. Speech input is also provided for with a simple new input type for speech that can be used in place of a traditional textbox.

Existing web pages can also be made smarter with HTML5 using what it calls microdata within a page. For example Google search will look for Rich Snippets on a page that provide hints to the search engine of what to display as a live preview for the page when it appears in search results. Forms can also be made smarter with new input types including email address, dates, ranges, telephone numbers and colors. These native types replace the homebrew JavaScript functions that have been used up until now.

Are we being fooled again?

The biggest question about HTML5 is whether the industry can really pull it off. The changes are so vast and the interests involved so varied that there is danger it will fall apart before it achieves its goals. The specification itself is still evolving rapidly and being expanded to add more features to support features like cameras and phones. At the same time it is being rolled out with varying compliance by do ens of vendors.

On the desktop, while IE9 supports some HTML5 features, it won’t be until IE10 in 2012 that Microsoft will add drag and drop and multi-threading, and even then it’ll still be behind Google Chrome and Apple Safari. The situation is even more diverse on mobile devices. Developer tool firm Netbiscuits reports that while the vast majority of popular smartphones use some elements of HTML5, the leading handsets only support four of the 17 new standard components. With over 40 different vendors shipping Android devices alone and estimates that there are as many as 3,000 different devices in common use, the challenge of implementing HTML5 across all those devices has created a thriving industry in HTML5 development tools to help bridge the gap.

Sencha Touch offers an HTML5 development environment which supports iPhone, Android and Blackberry from a single project

Startups Sencha and Appcelerator have taken open-source HTML5, CSS3, and JavaScript technologies and packaged them into cross-platform development tools which not only provide better development environments for HTML5 but help smooth off the rough edges of HTML5 implementation between platforms. To protect the franchise it currently owns with Flash, Adobe has waded into the fray with its own HTML5 authoring tools, Muse for designers and Adobe Edge for developers who are considering moving over from Flash. Adobe has also just purchased Nitobi the maker of PhoneGap, a tool for developing HTML5 applications that can be sold in the Apple appstore.

Check back soon for part two of ExtremeTech’s coverage of HTML5!

What is HTML5, and why it will save the web from itself