HTML5 — the future of the web is here

HTML5 is not just another version of a markup language — it is a collection of technologies that transform the web from a platform for documents into a platform for applications. Semantic elements, Canvas, Video, WebStorage, geolocation, WebWorkers and dozens of other APIs open up possibilities that previously required Flash or native plugins. After years of development and discussion, HTML5 is finally ready for production deployment.

Semantic elements¶

One of the biggest changes in HTML5 is the introduction of semantic elements. Instead of generic divs for everything, we now have header, nav, main, article, section, aside and footer. These elements have no visual effect — you still need to style them with CSS — but they give content meaning. Search engines better understand page structure, screen readers can navigate users between sections, and the code is more readable for developers.

For our enterprise projects this means better accessibility without extra effort. Previously we had to add ARIA roles and landmarks manually. With HTML5 semantic elements, basic accessibility is built directly into the HTML. The article element clearly states that this is a standalone piece of content. The nav element marks navigation. The aside element is supplementary content. This is also an SEO advantage — Google better understands what is the main content and what is the sidebar.

Canvas — drawing in the browser¶

Canvas is perhaps the most interesting new technology in HTML5. It is a bitmap drawing surface that you can draw on using a JavaScript API. Lines, rectangles, circles, images, text, gradients — all programmatically. This opens the door to data visualizations, games and interactive graphics directly in the browser without any plugins.

For our projects, Canvas is most interesting for data visualizations. Instead of generating charts on the server as PNG images, we can now draw interactive charts directly in the browser. The user can hover over data points, zoom, filter — all without server communication. Libraries such as Raphael.js and Processing.js make working with Canvas easier and add a higher level of abstraction.

There is also an alternative — SVG. While Canvas is bitmap (you draw pixels), SVG is vector (you draw objects). SVG objects are part of the DOM, so you can attach event listeners and style them with CSS. For charts and diagrams, SVG is often the better choice. Canvas wins for games and situations where you are drawing thousands of elements — DOM manipulation is slow with a large number of elements.

Video and audio without plugins¶

We can finally play video and audio directly in the browser without a Flash player. The video and audio elements are as simple as the img element — you specify the source and the browser handles the rest. You also have full control via the JavaScript API — play, pause, seek, volume, playback rate. You can create your own player with your own design.

The problem is with codecs. Firefox and Chrome support WebM and Ogg, Safari supports H.264/MP4. Internet Explorer 9 supports only H.264. In practice this means you need to prepare video in two formats. But the future is clear — native video in the browser is better than Flash in terms of performance, accessibility, mobile devices and security. Apple’s rejection of Flash on iPhone and iPad significantly accelerated the adoption of HTML5 video.

Web Storage — localStorage and sessionStorage¶

Cookies were always a limitation for storing data on the client side — a 4KB limit, sent with every HTTP request, complex manipulation. HTML5 Web Storage introduces two new mechanisms. localStorage stores data permanently (survives closing the browser) with a typical limit of 5–10MB. sessionStorage stores data only for the duration of a session (closing the tab deletes the data).

The API is trivial — setItem, getItem, removeItem. Data is stored as key-value pairs of strings. For complex data you serialize JSON. In our applications we use localStorage to cache user preferences, in-progress forms and offline data. We no longer need to worry about a user losing a partially filled form by accidentally closing the browser.

Geolocation API¶

The HTML5 Geolocation API enables obtaining the geographical position of the user (with their consent, of course). On mobile devices it uses GPS, on desktop WiFi triangulation or IP geolocation. The API is simple — you call navigator.geolocation.getCurrentPosition and receive coordinates. You can also track user movement via watchPosition.

For our clients in the logistics sector, this is a key technology. Delivery drivers can report their position directly from a web application without installing a native app. The dispatcher sees all vehicles on a map in real time. Previously this required an expensive native application — now a web browser is sufficient.

Web Workers — parallel JavaScript¶

JavaScript in the browser has always run in a single thread. If you ran a complex computation, the UI froze. Web Workers solve this problem — they allow running JavaScript code in a background thread. A Worker has no access to the DOM (it cannot manipulate HTML), but it can perform computations and communicate with the main thread via message passing.

This is huge for web applications that process data on the client side. Parsing large CSV files, encryption, compression, complex filtering — all of this can run in the background without blocking the UI. For our dashboards this means we can aggregate thousands of data points on the client side while the user can still interact with the application.

Offline web applications¶

Application Cache (AppCache) allows defining a manifest file that specifies which files the browser should store for offline use. When the user is offline, the browser serves files from the cache. In combination with localStorage you can create a web application that works even without an internet connection.

In practice, AppCache has its issues — cache invalidation is complex, debugging is difficult and update behavior is unintuitive. But the concept is right and for some use cases (field workers, mobile inspectors) it is a game changer. In the future we expect a better API — Service Workers are already appearing on the horizon.

Browser support¶

The main question for enterprise development is browser support. Internet Explorer 8, which still dominates in corporate environments, supports no HTML5 features. IE9 adds support for Canvas, SVG and some semantic elements. Chrome and Firefox have the best support and update automatically. Safari supports most of HTML5 on both desktop and mobile.

For backwards compatibility we use Modernizr — a JavaScript library that detects support for individual HTML5 features and allows conditionally loading polyfills. HTML5 Shiv (also known as HTML5 Shim) ensures semantic elements work in IE8. Respond.js adds CSS3 media query support for IE8. With these tools we can use HTML5 today and degrade gracefully for older browsers.

Forms in HTML5¶

HTML5 introduces new input field types — email, url, tel, number, date, range, color and more. The browser can display a specialized input widget (a datepicker for date, a numeric keyboard for tel on mobile) and automatically validate the format. The required attribute marks mandatory fields, pattern allows a regular expression for validation, placeholder displays a hint in an empty field.

For us this means less JavaScript for form validation. Previously we used the jQuery Validate plugin for every form. Now the browser can perform basic validation natively. Of course server-side validation remains necessary — client-side validation is only for user convenience, never for security.

Conclusion¶

HTML5 is a huge step forward for the web platform. Semantic elements, Canvas, Video, Web Storage, Geolocation and Web Workers open up possibilities that previously required plugins or native applications. With polyfills and feature detection we can use HTML5 today. The future of the web is bright and HTML5 is the foundation of that future.