Let's work together

Tell us about your project and we'll get back to you soon. All fields are required.

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

Going Mobile: Mobile Lead Generation and The Role of Your Mobile Responsive Website

Your customers and future customers expect to engage with your website via a mobile phone or tablet. Is your website mobile responsive?

12 Ways to Increase Workforce Engagement with Your Intranet

Intranets are a powerful tool for managing any enterprise, but more and more businesses are coming to realize intranets can be a powerful workforce engagement tool as well.

Using Intranet Social Tools to Boost Engagement & Collaboration

A key goal of intranets today is to streamline company processes to ensure efficiency of the workforce. For every 1% increase in employee engagement, the ROI for social intranets increased by 100%. He ...

Getting Authorization Right for an Integrated, Single Sign-on Web Portal

A web portal is a gateway to many online services so getting authentication right is a high priority. This is how you can achieve this.