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
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.”
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">
<p>Australian Marsupial <em>Common Wombat</em> digs extensive burrow systems.</p>
<p>Common Wombat, <small>Maria Island, Tasmania</small></p>
Offline & 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.
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.
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.
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.
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.
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.
Chrome Picture in Picture
Here you will see an example using Picture-in-Picture in HTML5 Video to swap between two video sources.
3D, 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.
3D CSS – Snow Stack Experiment(Created by Charles Yang)
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.
Performance and integration
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.
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”
Impress.js (Created by Bartek Szopka)
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!