So you’re in marketing, in the 21st century, you’ll most likely have heard people mention HTML5. You may even have heard that it’s set to replace Flash (according to a lot of people). But what does it actually mean to us, as marketers?

Well, first of all – a little tech background. HTML (hyper text mark-up language) was originally created to literally ‘mark-up’ or format text on screen (originally this was to help physicists share documents at CERN in 1989). This evolved to handle more than just text and links. Images became commonplace in early web pages, and as time moved on the language got richer and richer. By the mid 90’s we were seeing more interactivity through forms and controls, as well as the first use of style attributes to deliver more visually polished web pages. But still people craved a more fluid experience…

Flash was the answer in a lot of instances. Having originally been named ‘FutureSplash’ before Macromedia purchased the rights to develop it (in the mid 90’s), Flash offered a means to add animation, interactivity and audio to web pages (assuming users installed a ‘Flash player’ plugin). As Flash gained mass adoption across websites, more people downloaded the Flash player, so it became more universally accessible (and even more sites took the plunge to use it).

As Apple gained popularity over the last 5 years Flash has been an uncomfortable aspect of the online experience. The Macintosh architecture didn’t cope well with the demands of the Flash player – leading to a buggy and crash-prone experience. Worse still, iPhone users venturing across the web found the lightweight browser on their phones wasn’t equipped to handle the demands of the Flash player – which punched a big whole in their web experience. This lead to a turn in the tide of popular opinion (given Apple’s favour with the public and press), and alternatives to Flash were being talked about. In steps… HTML5.

HTML5 is an advancement of the previous HTML standards for web page coding. Another key advancement in the HTML experience is CSS3 (Cascading StyleSheets v3). The conjunction of these two technologies delivers an extremely rich browser-based experience. HTML5 can be thought of as the framework that powers this, and CSS3 can be thought of as the layer that delivers the visual polish.

HTML5 doesn’t really show its full colours until you start to use JavaScript to get the most out of it. The combination of HTML5, JavaScript and CSS3 provides the full dynamic web experience that actually seriously challenges Flash.

I’ve indicated what I consider to be some of the key areas of advancement in HTML5 below:

 

Graphics

Canvas and SVG graphics – enabling powerful 2D and 3D graphic rendering and interaction in the browser. This is one of the key ways in which HTML5 is able to achieve what has previously required Flash.

This really falls into two very distinct areas: SVG (vector) and Canvas (raster). The distinction is loosely speaking that SVG graphics are infinitely scalable (a bit like an EPS graphic can be), and canvas graphics will pixillate if zoomed.

A great showcase of Canvas can be seen here  http://www.html5rocks.com/en/features/graphics

 

Multimedia

Video and audio files can be played, and even modified dynamically, within the browser. Currently MP3s, videos, etc. require a plug-in to play them. The intention through the HTML5 draft specifications is for multimedia to be played within the browser, without requiring 3rd party plugins (i.e. open standard format).

Current debate over suitability of various open standard formats rages on – meaning there is no accepted standard for these file types. However, it is likely (given market forces) that Google’s development of the WebM video format and the wide acceptance of the Ogg Vorbis audio that these two formats (or a close relative of them) will emerge as future standards across all modern browsers.

Some great examples and tutorials can be found here  http://www.html5rocks.com/en/features/multimedia

 

Drag and drop

Dragging and dropping text, images and/or files between a browser window and your machines desktop. Currently (in HTML4 and older) to save something from an online environment, or to upload to a site, you need to navigate through a ‘browse’ selection window. HTML5 streamlines this considerably.

http://slides.html5rocks.com/#drag-and-drop

 

Offline web applications

As we get increasingly reliant on web-based applications and interactive sites, and we access these through increasingly mobile devices, it’s important to ensure these don’t break if the connection to the server drops. HTML5 enables the browser to identify which resources should be cached and made accessible offline.

 

Cross-document messaging (web messaging)

The ability (previously restricted for security reasons) to have different web pages talk to each other. In practice this is probably most relevant when using iframes – so for example a page that uses iframed content from multiple sources (to deliver a highly interactive experience) can allow the output from one iframe to update content in another iframe (or into the main body of the host page). This is an online equivalent of programs running on a computer talking to each other – important as we move into an increasingly cloud-based and web-app oriented future.