HTML5. Today's Hot Topic

HTML provides a means to create structured documents using headings, paragraphs, lists, links, quotes and other items. HTML4 is the current version, and HTML5 is seen as a way forward for developing powerful multimedia web apps, eliminating the need for third party, proprietary plugins like Flash, Silverlight or Java.

Developers have recently started to use HTML5 to build websites. Mozilla (http://hacks.mozilla.org/category/demo/featured-demo/), Google (http://www.chromeexperiments.com/), Apple (http://www.apple.com/html5/) and Microsoft (http://ie.microsoft.com/testdrive/) have all created showcase websites to demonstrate what their browsers are capable of. Articles touting the many advantages that will make developing websites and applications a lot easier have been appearing all over the web. The question is, will it deliver? Can it be used today?

What is HTML?

HTML stands for HyperText Markup Language, and is the predominant markup language for web pages. It's the language that's used to structure documents and pages. It does not, however, give documents style, and is not used to make pages dynamic.

The language is written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content.

<h1>This is a header</h1>

<p>This is a paragraph</p>

HTML is part of the "Web Standards", which also include Cascading Style Sheets (referred to as CSS) and ja vascript. Web standards are a set of standardized code languages and best practices for building web sites.

CSS is used to give style to HTML structured documents, for example to make a header blue and large, or align an image to the left.
Javascript is used to make these documents dynamic – to make something move, load information, change the color or position of an element, etc, without requiring the page to be reloaded.

Currently

Most websites today use HTML4, the current version of the language, which is almost 10 years old. The web has changed a lot in that time, resulting in HTML4 lacking features that have since been developed, such as advanced form controls, audio and video playback, drag and drop files and geolocation.

Currently, these features are incorporated into websites using either very complex ja vascript files, or plugins such as Adobe Flash, Microsoft Silverlight and Oracle's Java. Therefore modern websites often require several other technologies (in addition to HTML, CSS and ja vascript) to display pages.

This method means that development tends to become complex, pages are heavier and take longer to load, and are more difficult to understand for machines such as search engines, resulting in low ranking search results.

Third-party plugins are not included in browsers, and need to be installed separately, placing an additional burden on website users. Often these plugins are not available on all platforms, for example Silverlight is not available on Linux, mobile, and tablet devices, iPhones do not support Flash, and Java is extremely slow.

So what's new in HTML5?

HTML5 boasts numerous new features, for example:

Session & Local Storage, WebSQL & IndexDB Databases

These are methods used for storing data in a web browser, similar to cookies. With HTML5 a lot more information can be stored on a computer, meaning that a websites that has already been loaded on the machine can be reloaded without an Internet connection.

Workers

In HTML4 web pages can only complete one action at the time. This means that if the browser needs to execute an action that requires a lot of resources, it will freeze the browser until the execution is finished. With HTLM5, heavy actions can be 'sub-contracted' to workers in the background, without freezing the browser.

Drag and Drop

Files can be dragged and dropped from your desktop (or other location) straight into a website with HTML5, a big time saver compared to HTML4, which can only allow file selection from your computer via a 'browse' button.

Hash Change (Event) and History Management

With HTML4, the 'back' and 'forward' buttons only allow you to go from one page to another. HTML5 allows browsers to keep track of different states on the one page, meaning that visitors can use the back and forward buttons to navigate between these states.

Web Sockets

Web sockets will allow live content to be streamed, or pushed to the browser; servers contact computers only when new content is available. This means a saving on resources and bandwith when compared to HTML4, where pages that display live content have to check for new content on the server every few seconds.

SMIL

SMIL Allows the creation of multimedia presentations (like Powerpoints) using HTML tags. Allows timing, layout, animations, visual transitions, and media embedding, among other things. Presentations can be integrated inside a website, or can be opened inside a new window, and will not require additional software such as PowerPoint, or Acrobat to be displayed.

SVG & SVG Clipping Paths

SVG is an open vector image format. SVG files are lighter, load faster, and will not lose quality when displayed at a large size. HTML4 is limited to low quality GIF or JPEG images to create websites, which can appear pixelated or blurry when enlarged. SVG images can be also be animated, and will replace simple flash animations.

Canvas

Canvas can be used to create, modify and render 2D shapes, images and videos, live, within the browser. Pre rendering is not required. This will allow users to apply effects to images or videos, build graphs, animations, games, etc...

Another purpose of Canvas will be to analyse videos, for example to track movement from surveillance camera footage or to create histograms for images.

It sounds powerful, but it's a bit hard to imaging what it's capable off. Here are a few example (if the oages don't work, then that means that your browser doesn't support Canvas).

Play Mario: http://www.nihilogic.dk/labs/mario/mario_small_music.htm

Sound Visualisation:

http://www.p01.org/releases/20_lines_hypno_trip_down_the_fractal_rug/?

http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

http://9elements.com/io/projects/html5/canvas/

http://www.p01.org/releases/20_lines_twinkle/

http://scoundrelspoint.com/polyhedra/shuttle/index.html

Last but not least, Processing has been ported to uses canvas, which means that Processing can be used inside the browser: http://processing.org/exhibition/

GeoLocation

This allows websites to use your location to display customised information. Google has used GeoLocation in its free navigation system: http://www.google.com/mobile/navigation/, and also uses it to display personalised results in Mobile Search.

Form fields and Validation

In HTML4, form fields are limited to checkboxes, drop down menus, text fields and large text areas. To specify the type of entry allowed in a field, for example an email address, phone number, or date, takes additional development, as either the page must reload to validate the information in the field to ensure it's the correct format, or ja vascript is required to perform this action.

HTML5 will simplify the development for these types of forms significantly, making it impossible for users to enter anything other than the type of entry required in the field. HTML5 fields have an added advantage for mobile devices, in that the keyboards on the device can be optimised to display only characters relevant to the field type, for example website address fields will replace the space bar with a period, a forward slash, and a .com button

Microformats and Structure

New tags have been introduced in HTML5, making it easier for computer programs to understand the HTML source of a page. In future this will improve the integration of applications with websites, for example the ability to export compatible files to contact management and calendar utilities such as Microsoft Outlook, or open a map application when dealing with geographical coordinates.

The new microformats and structure of HTML5 will also improve web usage for people with disabilities. Applications that convert websites into plain text or Braille will only display relevant information, as opposed to all information on a page, as they do currently.

What are the issues?

Support for HTML5 is a bit patchy so far. The new features can only be used on some of the browsers, excluding many users and making use of these features in development difficult:

Local storage (to store information on the computer) is the only feature that can be used on all 5 major browser however Internet Explorer will not display pages when it's not connected to the internet, meaning the feature is currently largely unusable.
The Drag and Drop feature isn't supported by Opera and Internet Explorer
Hash Change and History Management doesn't work in Opera and Internet Explorer, and the use of the feature has issues in Firefox
Web Sockets work in Safari, and in Firefox on Windows only
New Form fields and Validation is buggy in all browsers
Workers, SMIL, Canvas, SVG and Geolocation don't work in Internet Explorer
Video and Audio is supported by all, but the format hasn't yet been standardised

Firefox 4 will be released in the next few months and Internet Explorer 9 will be released early next year. This means that a lot more people will soon be using a browser that supports most of HTML5's new features.

Surprisingly, it is easier to develop for mobile phones because their browsers are all based on Safari, which means that the available feature set is the same on nearly all phones.

It will take another few years before everyone will have modern browsers that support all of HTML5's features. New computers often come with an outdated browser, and many web users don't understand the importance of updating their browsers regularly. It is important to make a decision about which features to include in the development of a website, as users of certain browsers will inevitably be excluded.

So what's the Buzz about then?

Many people immediately assume, "eye-candy!" when they think about HTML5. This is not the case, however. HTML5, like HTML4, uses CSS and ja vascript for styling and animation.

This misconception is understandable, as the HTML5 showcase sites made by Apple and other developers very much focus on eye-candy. As a result, HTML5 has become the new buzzword, replacing Ajax and Web 2.0.

It is not commonly known that these showcases are a mix of technologies, and that in some cases do not use HTML5 at all (for example the Apple HTML5 showcase). The showcases are more about marketing than actual use of the technology, as the developers don't want it to be clear that their browsers don't fully support HTML5.

It is important that websites are developed using HTML5, even though support is at this stage limited. Browsers need to be updated to allow for new technologies, and using this technology right now is the best way to ensure that the pressure is applied to software developers to keep up!