HTML5, in one form or another, has been with us since 2004. In 2009 the Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C) joined forces to work on the standard, with WHATWG focusing on the ‘living standard’ (something that is never complete, and constantly improved) and W3C responsible for the formal HTML5 specification (effectively the reference standard).
W3C plans to issue a stable release of the HTML5 specification by the end of 2014, with an updated 5.1 release coming by the end of 2016.
The vast majority of HTML5 features are supported by all major browsers, and a whole host of leading websites use it to deliver improved experiences to their users (Google often use HTML5 to showcase advanced functionality on the web). In this post we look at three specific areas of HTML5 that every developer should embrace.
Video and audio tags
Both of these tags (<video> and<audio>) attempt to provide standard browser support for in page video and audio elements, without the need for third party plugins (typically something like Adobe Flash).
Unfortunately using either tag isn’t quite as simple as it should be. Whilst all modern browsers understand the elements, they each support different codecs (the actual format of the video or audio content).
For <video>:
- Internet Explorer supports just MP4 format
- Chrome supports all three available formats - MP4, WebM, and Ogg
- The latest versions of Firefox now support all available formats
- Safari just supports MP4
- Opera supports WebM and Ogg
For <audio>:
- IE only supports MP3
- Chrome supports all three available formats - MP3, Wav, and Ogg
- The latest versions of Firefox now support all available formats
- Safari just supports MP3
- Opera supports WebM and Ogg
Both tags allow multiple sources to be specified, and a browser will simply play the first compatible one. So coding up the right codec for selection is simply, but you do need to provide the full set of formats to account for all browsers.
Why is this good for developers?
The web has long moved on from being static medium. Video and audio are now big parts of web content. These tags, even with slightly misaligned support for codecs, break the dependency on third party tools like Flash and provide a universal cross platform (and mobile) solution.
The Canvas element
The Canvas element is used to draw graphics directly onto a webpage. Graphics are built up using geometric shapes, text, and color. The element works on a grid system, with lines and shapes plotted accordingly. The Canvas element itself is a container for drawings, with something like JavaScript required to create the actual shapes.
Anyone who has used vector drawing software, as opposed to bitmaps, will quickly get to grips with the implementation.
Why is this good for developers?
Including native drawing support in HTML, as opposed to requiring bitmap images or SVG files, makes many design, UI, and layout tasks much easier to accomplish. Vectors easily scale with screen resolution, and have a (comparatively) tiny memory footprint.
Web storage
Web storage started off as part of the HTML5 standard, but has now been moved to its own specification. However we have included it, as it is a really important tool for those building cutting edge web applications. Supported by all major browsers, it offers two ways to store data in a web browser - session storage and local storage.
Session storage is limited to the scope and to the lifetime of a particular web page. It is designed to allow separate instances of applications to run independently from each other (a bit like two Word documents being open at the same time). Local storage persists after a browser window is closed, and is intended to act as more of a client offline storage mechanism.
Both methods expand on the principles of traditional cookie storage, but greatly increase the amount of data that can be stored (upto 25mb depending on the browser).
Why is this feature good for developers?
Web storage allows browser based applications to act more like their desktop counterparts. Not only can they access a much greater volume of data than has been possible in previous versions of HTML, but they can use this storage to implement true ‘offline’ application and data access.
If you are looking to create hybrid mobile apps that look native on every mobile device and the desktop try IgniteUI today! Clcik Here to Get Your 30 Day Free Trial of Ignite UI jQuery / HTML5 Controls.
