Photo of Adam Lusted width=

Why HTML5? HTML5 is the latest HTML recommendation by the W3C – this is really exciting. If you look back through the history books, you’ll see that the last W3C recommendation (HTML4.01) came out in 1997, the same year the Spice Girls and Hanson were at the top of the music charts! The funny thing is that this is STILL the current W3C standard - so really we are building the internet on an old set of rules.

In 2008, the W3C put forward its first draft for the HTML5 specification. This was the first glimpse of the future of the internet and I’ll tell you what, it looked great. Fast forward to 2012 and HTML5 is about to be an official standard. All the major web browser vendors have updated their browsers to support HTML5, and with Apple refusing to add flash to iOS, the only way you will achieve the same rich interactive visuals is with HTML5. 

So what does HTML5 have to offer? The W3C has eight groups of changes for HTML5

HTML5 Semantic 2012Semantics
Search engines love Semantic code and Semantic code improves accessibility. More importantly, Semantic code is clean code and we [developers] love clean code! Semantic code on a very basic level provides meaning to structure. W3.org describes it as “A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.”

Example:

A basic semantic example is the new Figure & Caption element that has been recommended. In the sample code below, we can now link an image and its rich text description with the figure element. We can now give meaning to content.

<img src="wombat.jpg" alt="wombat">
<figcaption>
<p>Australian Marsupial <em>Common Wombat</em> digs extensive burrow systems.</p>
<p>Common Wombat, <small>Maria Island, Tasmania</small></p>
</figcaption>
</figure>


HTML5 Offline Storage 2012Offline & Storage
In this mobile age, it’s important to have access to Web Apps and content even if there is no internet. HTML5 makes this possible with its App Cache, Local Storage, Indexed DB, and the File API specifications. This allows websites to store important stuff locally on your device for your browser to use.

Example:
Gmail web app powered by HTML5
Google has made use of HTML5 Offline and Storage by providing Gmail users with access to their emails offline. Users can set and choose the amount/number of days’ worth of mail that they want to sync. You can also store attachments for offline use such as documents, photos, images and audio.

HTML5 Device Access 2012Device Access
Taking advantage of device functionality in your web application provides an enriched experience and improved usability. Such functionality may include: Geolocation API, audio/video, microphone, camera and tilt orientation functionality, as well as, personalised data stored locally such as contact list, event calendar and photos. 

Example:

  • With HTML5 Device Access, you can take advantage of orientation specific features, such as the device accelerometers, gyroscopes and compasses. With this access, you can enhance the game-play of a browser based game such as controls for a motor racing game.

HTML5 Connectivity 2012Connectivity
We don’t have time to wait. Watching the loading image go round and round, is more infuriating than being poked in the back by the kid sitting behind you on the bus. We want information now! HTML5 Web Sockets and Server-Sent Event provides more efficient connectivity, meaning quicker load times, real-time information, faster game-play and better communication.

 

HTML5 Multimedia 2012

Multimedia
W3.org describes audio and video as ‘first class citizens’ of the digital age. Through the HTML5 API you can access, control and manipulate your video and audio samples for improved experience and engagement. These new video formats are also supported on iOS.

Example:
Chrome Picture in Picture
Here you will see an example using Picture-in-Picture in HTML5 Video to swap between two video sources. 

http://studio.html5rocks.com/#PiP


HTML5 3DGraphics 20123D, Graphics & Effects
Goodbye Flash! Using HTML5 SVG, Canvas, WebGL, and CSS3 3D features, you’ll be able to create some amazing animations and effects rendered in your browser. Create all the weird and wonderful things you used to create in Flash in HTML5, and the brilliant thing is that it’s compatible across all the latest browsers and modern smart phones, with no plugins required.

Examples:
3D CSS – Snow Stack Experiment(Created by Charles Yang)
This is an experimental image gallery using JavaScript, CSS 3D transforms and transitions.
http://www.satine.org/research/webkit/snowleopard/snowstack.html

Cut The Rope (Created by Zeptolab)
The team at Microsoft IE and Zeptolabs (the creators of the popular Cut the Rope game) created this fun game using Canvas.

http://www.cuttherope.ie

 

HTML5 Performance 2012Performance and integration
There are not that many good examples of this floating around on the web at present, but basically, this is to do with making your Web Application run faster to reduce load time or improve interaction times. A variety of techniques can be applied such as Web Workers. Web Workers provide you with the ability to run multiple tasks at any one time, as opposed to the tried and tested JavaScript method where tasks are run as a series.

 

HTML5 CSS3 2012CSS3
CSS3 offers a wider variety of stylization, effects and animation that will improve the look and feel of your web application. Typography flexibility using Web Open Font Format is a significant part of enhancing the overall design of your site, not to mention other layout, and image filters and effects. CSS3 also sports some amazing new selectors that really make a developers life easy. Have a look at the examples to get a glimpse of what you can achieve.

Examples:
One Hour Per Second (Created by Google)
This is a fun interactive website created by guys at YouTube in celebration of their achievements: “one hour of video uploads per second”

http://www.onehourpersecond.com/

Impress.js (Created by Bartek Szopka)
This is a clever example of how you can take your slide-based presentations to the next level. This example uses JavaScript, CSS 3D transforms and transitions.


http://bartaz.github.com/impress.js/

Closing thoughts
As you can see, W3C has made a giant leap with HTML since their last release in 1997. HTML5 is still in its draft stage and very much still in its experimentation phase, but it’s the best time to start thinking about applying the technology so your website stays innovative, fresh, adaptable and accessible to your wider audience.

The best news yet is that elcomCMS is ready to use the majority of the new HTML5 spec. With the User-Agent Mapping you can tailor full, rich pages with HTML5 while supporting older browsers like Internet Explorer 6 which does not support HTML5 (IE6 is also not supported by Microsoft anymore). You can have rich HTML5 canvas visuals, beautiful web fonts, local storage, microdata, device access, the power of CSS3 and many more new features that are included in the HTML5 spec. We already have a handful of sites that are utilising HTML5 and many more that are using small parts of the HTML5 spec.

So get excited and start experimenting and thinking about HTML5.

Thank you to the following sites for their examples. You can also browse these sites for more information.

Share your examples in the comments section below!

Other recommended articles

5 Key Legal Technology Solutions To Improve Your Firm's Efficiency

An efficient legal firm can be the difference between profits and losses, growth or collapse. Here are the key legal technology solutions shown to increase efficiency.

What is a Community Engagement Portal?

Recently, there seems to have been a re-emergence of the term community portal. There’s no mystery to it though and it’s a concept that’s been around for some time.

10 Intranet Trends for 2019

Keep an eye out for these 10 trends on the the best intranet features and improvements to develop in the coming year.

Let them have cake and eat it! Here are 5 ways to ensure your Customer Experience (CX) always gets rave reviews

Sharing our thoughts on a recent customer experience is second nature to most of us, and studies have shown we are more likely to share negative experiences than positive ones. Here are five tips for ...