HTML standards have been an important part of web development since the beginning of the web. HTML5, the most recent version of HTML, is a work in progress. After several attempts, the World Wide Web Consortium (W3C) formally began work on an update to the HTML specifications. (See "The Past, Present, and Future of HTML5" for detail about the history of HTML5.) This work first bore fruit with the publication of a public draft of HTML5 standards in January 2008. Hopefully, the final specifications will occur over the next several years, but the lack of formal specifications doesn't mean that we as developers can't take advantage of the HTML5 features that browser companies have already incorporated into their products. Specifically, Microsoft, Mozilla, Apple, Google, and Opera have begun implementing parts of the HTML5 specifications in their browsers. In this article, we'll take a look at some of those specifications and discuss what we developers need to do to make our applications compliant with HTML5.
New Features in HTML5
HTML5 is an umbrella term for the new HTML, JavaScript, and Cascading Style Sheets (CSS) features that are being standardized. New HTML tags include the <nav> tag, which is used for general website navigation; the <video> tag, which is used for displaying video content; and the <audio> tag, which is used for playing audio content. In general, these tags replace the <object> tag that websites used previously. HTML5 also includes new input controls that are designed to handle some of the more common input scenarios, such as issues with dates and times. Finally, numerous attributes have been added to existing controls. Many of the existing input controls have new and enhanced attributes that allow browsers to expose users to new functionality.
Along with the new markup specifications, new JavaScript classes let programmers capitalize on the latest features that developers have been asking for. The following paragraphs discuss some of these features.
JavaScript selectors. There are new JavaScript selectors for getElementById and getElementByTagName. There are also selectors, such as getElementByClassName and querySelector.
LocalStorage. Developers have long been using cookies for local storage. However, cookies are sent across the wire and back to the server, a transfer that increases sent data volumes. HTML5 introduces support for a storage feature named LocalStorage. With this feature, data is no longer sent across the wire with each server request. Also, more data can be stored with LocalStorage than with cookies.
WebSQL. Although WebSQL is no longer a part of the HTML5 standard, this feature has been implemented in several browsers, such as iPhone's Safari and the Android browser. This feature can be tested for and used.
Threads. On a desktop application, a long-running operation can be spun off into another thread, allowing the user to continue working without blocking the application's UI. HTML5 introduces this concept of threads in the browser environment, a feature known as Web Workers.
Application caching. What happens when an application cannot connect to its web server? There may be a variety of reasons, but the user only knows that the application is offline. HTML5 provides an offline application-caching API that allows an application to degrade more gracefully when it cannot connect to its web server.
Web sockets. When there is a long-running event on the server, the browser can be set to poll for a completion. What happens when 100,000 users continually nag the server with the online equivalent of "Are we there yet?" To address this issue, the HTML5 standard has web sockets. However, there are some security issues in the underlying communications protocol that must be addressed.
Drawing. It's possible to draw in the browser by using the Canvas tag and its associated JavaScript commands.
Geolocation. Geolocation is not a part of, but is associated with, the HTML5 specifications. Because it is often discussed as a part of HTML5, we'll consider it that way for this article. Geolocation allows a browser to determine its current location so that the user can be presented with local information. Geolocation allows for more accurate location information than is typically possible through IP address lookup services.
Other features allow for drag-and-drop support, audio and video tag manipulation, server-sent events, and other features. Some of these features will also require server support for optimal performance.