, , , ,

Experimenting with HTML5 and adding it to my site met with mixed success. Opera developers couldn’t wait to add the APIs for the new markup standard when it was released early 2008, so version 10.63 of the browser already supports much of the new markup reasonably well. It looks like the next lot of browser releases will full support HTML5, which should nail most the compatibility problems.
One of the good things about HTML5 is the new markup shouldn’t affect how the web page appears in older browsers, so there’s no harm in trying it out.
Below are just a few example of what the new HTML5 elements on their own can do:

Audio and Video Elements
Before HTML5, embedding a media player in a page required quite a bit of JavaScript, but now this can be done with just three lines of HTML. The developer only has to use the audio or video tag, specify the source file, and possibly add the controls attribute. The browser’s API will render the interface and handle everything else. JavaScript could be used to add extra features, but this isn’t essential. Even without JavaScript some nice audio player designs are possible with a bit of creativity:

This works okay in most recent browsers, especially in Opera. A major problem at the moment is proprietary format and codec compatibility, which means Opera and Firefox can’t play MP3 files using the audio tag. In Opera, playback is limited to .wav and .ogg formats for audio, and Ogg, Theora and Vorbis for video, which means all media streaming from HTML5 sites would need to be from these formats to cater for everyone.
Google has released its own VP8 open format, which it hopes will be supported by all browsers in future.

Form Elements
These simplify form controls, with input and output fields defined within a single input or output tag, with the type defined as an attribute. Apparently they work really well in Opera 11. Some of them worked with Opera 10.6.
The date attribute will add a nice little drop-down calendar to the page, while the range attribute adds an adjustable slider. There are many other types of input attributes that can be used in place of older form controls. Form options can be contained within the datalist element, although it’s going to be a few more years before its use becomes clear.
Input can also be validated, making sure users enter only the correct values and formats in the form. There’s also the placeholder attribute, so that input fields can display examples and hints by default.

Structure / Semantic Elements
Less obvious are the semantic tags, which will no doubt become very important in a few years. The purpose of these is to make HTML documents machine-readable, for software to distinguish between specific sections like main content, article, header, footer, side notes, references, etc. We can see an early example of this with Microformat data, which enables an email client to pull contacts and dates from a web page.

Offline Storage
One of the new features is the ability to store web session data in persistent storage. Downloading a web page, along with applications and other files it uses, will be easier to achieve with something called a manifest, which is a list of files essential to a page/application. Future browsers will recognise this, and know what to download in addition to the HTML5 document. After that, the web application can be run locally, using the offline storage.
Opera Widgets already does something roughly like this, and demonstrates the potential of future web applications using this feature.

Microsoft and HTML5
Since my last post on the subject, Microsoft has changed its position and is now backing HTML5, likely for two reasons: Microsoft has too much to lose by refusing to support standards that everyone else is using, and it certainly wants Internet Explorer to support common technologies, especially with Firefox, Chrome and Opera taking increasing shares of the market. Microsoft will also want a say in how things develop over the next decade.
The current fixation with ‘app stores’, which is where Apple makes a lot of its profit, will be over when the new markup becomes commonplace, as there’ll be little point when applications on web pages can simply be downloaded and run locally. This is one area Microsoft can beat Apple it gets stuck in early.