MIH SWAT

HTML 5 is the next major revision of the core markup language of the World Wide web, HTML, and will replace both HTML 4.01 and XHTML 1.0 (after W3C announced it will discontinue further development of XHTML 2).

HTML 4.0 was published in December 18, 1997, as a W3C recommendation (version 4.01 was completed in September, 1999). At that time, Internet Explorer 4 had just been released, the Mozilla Foundation was not formed, we did not have AJAX or even XML. Of course we have had some improvements since then, XHTML 1.0 became the recommendation and CSS2 was implemented by most browser vendors, but HTML still does not supply most of the needs of modern web application. And because of that we have to rely on third-party technologies like Adobe Flash or Microsoft Silverlight.

This new revision aims to change that and it tries to make development easier. Work on it started in 2004 and according to the Web Hypertext Application Technology Working Group (WHATWG), it will reach Candidate Recommendation only in 2012. But that doesn’t mean you can’t use it now: several browsers have already implemented lots of features, such as canvas and video. The last draft was released in the beginning of the year and the editors are: Ian Hickson of Google, Inc. and David Hyatt of Apple, Inc.

Some of the most impressive new features in HMTL 5 are:

Canvas

The <canvas> element lets you render arbitrary graphics on the web using scripting (usually javascript). It consists of a drawable region with height and width. Javascript code can then access this area through several drawing functions. It can be used for graphs, games, animations and others.

There is a nice tutorial in Dev.Opera and lots of demos in Canvas Demos. Bespin, a Mozilla Labs experiment on how to build an extensible Web code editor, makes really good use of this element (you have to register to use it).

Implemented in: Chrome, Firefox, Safari and Opera.

Video and audio

HTML 5 has specific tags for video – <video> – and audio – <audio> – that makes as easy to embed these elements as it is to embed an image – without relying on third-party plugins anymore. Unfortunately, there is no specific common video codec, because Apple and Nokia opposed the recommendation to use the free  Theora and Vorbis codecs last July (you can read more about it here).

Youtube has a demo page using the video element. The Pirate Bay also launched a new service called Video Bay with the new tags.

Implemented in: Chrome, Firefox, Safari and Opera.

Geolocation

This makes location available for every browser that is compatible with HTML 5. The source of the information includes GPS, cell-tower triangulation, IP address among others.

You can see an example here.

Implemented in: Chrome, Firefox, Safari (iPhone), Opera

AppCache and Database

This makes possible to applications to store data locally and then access it without having to connect to the internet. Google Gears implements this feature currently.

You can test this feature with this Stickies App that was presented in Google I/O.

Implemented in: Chrome, Firefox, Safari, Opera (Mobile)

Web Workers

Web workers allows you to run scripts in parallel in your web page, without blocking the interface. A script loaded and executed in the background is considered a ‘worker’. This is especially exciting for javascript programmers who have had to split the execution of their code using timers.

You can compare the speed of an app with different number of workers in this example.

Implemented in: Chrome, Firefox, Safari, Opera (Mobile)

A last piece of good news about HTML5 is that its recommendation has a detailed specification about how vendors should parse HTML documents. Before that, browsers usually tried to guess and copy the behaviour of others for markups. With this, compatibility reaches its highest level and everybody wins.

There are tons of resources about HTML5 in the web today. Some interesting links worth checking out are:

W3C Working Draft – W3C Working Draft from April 2009

WHATWG Working Draft – WHATWG Working Draft from August 2009

HTML 5 Gallery – A showcase of sites already using HTML5

HTML 5 Doctor – tips and resources to help you use HTML5 today

HTML4 Differences – HTML 5 differences from HTML 4

Choose your own HTML 5 Adventure – Other HTML 5 Examples from Google I/O

Related posts:

1. The State of Javascript