The impact of HTML5 on Web applications

HTML, the HyperText Markup Language, is an essential part of the Internet experience, but since the HTML 4 standard (v 4.0 Dec 1997, v 4.01 Dec 1999) was finalized, further development has been irregular to say the least. An attempt to push HTML into compliance with XML markup started even as HTML 4 refinement was in progress, with a formal W3C XHTML recommendation in January 2000. While there has been some penetration of XHTML into Web practices, the dominant standard is still HTML 4.

Even as HTML 4 was being finalized, developers realized that it would not be adequate to fulfill the vision of a comprehensive Web hypertext architecture. Furthermore many felt that the W3C framework would not be the best way to explore the possibilities. The Web Hypertext Application Technology Working Group (WHATWG) got organized in 2004. It operates in informal coordination with the W3C HTML Working Group and many browser developers are associated with both groups. WHATWG is very open to input from Web designers.

According to the charter, the goal of WHATWG is the creation of a coherent development environment for Web applications. Fitting innovations into the existing framework of Web technology of HTML, XML, CSS, and JavaScript (ECMAScript) without invalidating the huge mass of existing Web applications is obviously going to be quite a trick. HTML5 is only one part of what WHATWG sees as essential to the future of Web applications.

HTML5 innovations are made possible by specifying a Document Object Model (DOM) that is much more complex and complete than that of HTML4 or XHTML. This DOM defines all of the names and attributes of the components which make up a HTML5 page and makes possible the manipulation of these components by JavaScript scripts.

New markup elements

A number of new markup elements have been introduced to make it easier to define the structure of a HTML document and to expand the user interaction capabilities. Many of the new elements are intended to improve the connection between content and semantic intent. An example of semantic markup would be a <nav> section containing navigation links. Presumably semantic markup will get us even better search engine results. For most developers, the most significant new elements will be <video> and <audio> for embedding multimedia content and <canvas> for dynamic graphics.

Markup for forms gains many new attributes to support input checking, for example, ensuring a numeric input is in the correct range or that an email address is in the right format. These validity checks should only be considered a user interface improvement, not a substitute for validity checking at the server.

Improved Graphics capabilities

Scalable Vector Graphics (SVG) is an XML language for defining 2D graphics. Embedding SVG in HTML has been supported in the current generation of browsers (except MSIE) and SVG support is required in HTML5.

The <canvas> element defines a bitmapped area of the display which can be used for dynamic graphics. Drawing on the canvas will typically be done with JavaScript using graphic primitives which will be familiar to anyone who has created computer graphics. In addition, typical image sources such as JPEG files can be composited onto the canvas. Furthermore, other images on the HTML page can be used as a source. Simple animations can be accomplished but I dont think canvas will completely replace the more spectacular graphics which specialized plug-ins can achieve.

User interaction

HTML5 tries to expand the ability of a user to interact with a page. One possibility is allowing "drag and drop" to move content within a page. Other suggestions provide expanded management of undo capabilities and the capability to move content between web pages or Web Messaging.

Microdata

The W3C is atteming to define a specification for embedding machine readable data in HTML documents with a very general API for extracting data items. Of course this will have to be compatible with the very wide use of JSON (JavaScript Object Notation), right now browser designers are not implementing this API as we see in the following browser compatibility check.

Browser compatibility

Specification writers and browser developers all assume that we will be using many features of HTML5 which have reached maturity long before all the blue-sky ideas settle down. Browser developers have been incorporating the more settled features for some time. Since I happen to have the most popular browsers on my working machines, I thought it would be interesting to try them all on the html5test.com website (6/08/2010 version.) This site will show you a score (out of 300) roughly indicating how well your browser supports HTML 5. In the table, the "missing" column indicates some of the areas of greatest weakness, not specific features.

The low score for MSIE is not what I expected considering all the HTML5 talk in Microsoft publications. It is rumoured that MSIE 9 will implement many more of the required features. If this doesn't happen, look for further decline by Microsoft in the browser sweepstakes.

Future of HTML5

Browsing around the WHATWG website I frequently run into "draft" standards and "next generation" addition discussions. Browsing around the browser developer sites I also see lots of "proposed" innovations. Browsing around the W3C working drafts I see changes that have taken place since I started researching this article, including specifications which were once part of HTML5 being moved to separate development tracks. Clearly, HTML5 is not going to reach a final form any time soon so developers need to carefully consider the stability of the standard before making a leap.

All the tasty new HTML5 features require a lot of work by JavaScript if they are to provide a satisfactory user experience. This is going to place a premium on high performance of the JavaScript interpreter, especially on low powered portable devices.

Competing technology

Developers have charged off in all directions since the first Java applets showed how HTML could be embellished with dynamic "plug-in" additions to HTML pages to create "rich Internet applications." Just trying to list the players is exhausting - Flash, Flex, Silverlight, JavaFX, JSON, CSS3, and on and on. Will the open standard HTML 5 win out over proprietary and quasi proprietary technology? I suspect only the most useful elements for video and audio will become widely used any time soon.

HTML5 information resources

WHATWG current draft HTML5 standard (changes frequently.)

W3C list of HTML5 differences from HTML4 (June 2010.)

A very lucid and extensive popularization of some HTML5 features.

Wikipedia article on XHTML.

Wikipedia summary of HTML5.

Wikipedia entry on the WHATWG (Web Hypertext Application Technology Working Group.)

Discussion of factors hindering adoption of HTML 5

W3C working draft on Microdata.

Tutorial on use of the canvas element.