In this new wave of technology, you can't do it all yourself, you have to form alliances.

HTML5: An Overview

March 22, 2011

HTML5: A brief overview of whats to come

HTML5 is pretty rad, so let's start with a little visual stimulus to get this post started off right, and then we will briefly go over some of the more technical aspects which is enabling the capabilities you will see.

1) NIKE Better World
2) Klowds
3) Canvas Cycle
4) Particle Animation
5) Canvas 3D

Support is here! (at least kinda, sorta...)

By the time Microsoft shows up to the table, it's a safe bet that dinner has been served and the other guests have moved on to desert. As Internet Explorer 9 emerges onto the scene, we see it supporting most of the features offered by HTML5, this is good news. IE is the last big player to join the crowd of Firefox, Chrome, Safari, Opera (in order of current usage) to now offer desktop browser support for HTML. Mobile is a different story, mobile devices and their browsers have been above the curve for some time now in part due to their lack of consistent support for other rich content delivery methods such as Flash, and JavaScript. It's important to remember though, that while many/most of the features HTML5 boast are being supported, not all are, so don't assume you're in the clear to let loose just yet. Further more, developers are still reliant on adoption of these new browsers before the technologies they enable offer any real value, so continue to check statistics at W3C.

HTML5's Major Contributions

- Video: Native multi-format support is the new offering. In the short term, it requires a bit more work as browsers are in a disagreement as to what the next video format standard should be, so developers must provide several for complete support. In the long term, this should reduce the reliance on third party plugins and improve video integration on the web.

- Canvas Element: The canvas element supplied by HTML5 allows for "developers to script and render 2D shapes/bitmaps" - Wikipedia. Potential applications include, particle generators, graphs, and video games.

- Form Input Types: With HTML5 comes about 13 new input types aimed to help facilitate the needs of the common form, including better mobile integration. Currently many of these different needs are being fulfilled by JavaScript libraries such as jQuery, MooTools, and Dojo. Additionally, input text fields have been updated to allow for placeholder text to exist before they receive content, and when they don't have mouse focus. This has always been possible, but its integration as a input property is certainly a time save.

- Local Storage: Like cookies on steroids, this functionality allow for larger amounts of information to be held on your local computer for future use including offline access. Unlike cookies, which are sent to the web server ever time a new page is requested, HTML5 storage can be accessed via background JavaScript calls at any time. This allows for less front end load time, and the ability to selectively access data as needed. Local storage that is managed by your browser does open up some security concerns which I wont address in detail here. I will however note these concerns have been it part acknowledged by the regulation of same-origin restrictions, which aim to prevent web sites from snooping on other websites stored information.

- Offline Applications: Piggy backing on the local storage capabilities, HTML5 provides the building blocks to create web centric applications which function independent a internet connection. The process being, a user goes to a website/application once and the files needed for offline use are automatically downloaded. When the user disconnects, the browsers looks to the local files for application information, allowing for continued access to information, which can be published or updated next time connectivity is available.

- Geolocation: This term has been buzzing around the developers community for some time now, showing its face in the world of social media and other internet hot spots. Geolocation is the process of determining a users geographic location through a variety of different methods including, GPS, IP address, wireless network connections, etc. We have seen their proliferation across the Mobile platform, but have yet to see it become common place on the desktop environment. Check to see if your browser has geolocation enabled, and see a list of browsers supported.

Upgrade Your Code

The first part of integrating HTML5 code into your current website, or starting a new build is to update your doctype. All tags defined in HTML4 are supported in HTML5, therefor upgrading your doctype won't cause errors with current code, just allow you to use new elements. The other good news is that unlike HTML4's which has many variation of the doctypes declaration, HTML5's is simple and universal for all HTML5 uses.

HTML4 DOCTYPE Declaration:

HTML5's Declaration:
<!DOCTYPE html>

Checking for support

All features and their properties within HTML5 can be checked for browser compatibility by referencing the DOM. There are a few ways to accomplish this, below are two. It is important to remember that different browsers will support different elements, and not all properties are supported for the elements which might pass a simple DOM boolean test. Therefor to be safe, check not only the elements, but also the properties/methods you wish to use.

1) For those who like to write their own solutions, below is a frame work to do so. While the following example demonstrates checking specifically for the compatability with the <canvas> element, the same approach can be applied for any element or property. The below function does three things.
1. creates the <canvas> element
2. checkes for the getContent method
3. returns the results as a boolean value

function supports_canvas() {
return !!document.createElement('canvas').getContext;

2) For those who would prefer download a detection library Modernizr is a good solution. Acting as an open source MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features, this library changes often so stay up to date with it. After running automatically on page load, it creates a Global object called Modernizr which contains a set of Boolean properties for each detectable feature.

if (Modernizr.canvas) {
// browser support feature
} else {
// no native canvas support

In other situations you can avoid doing a formal support check and just let the code run through, providing a plan B if the HTML5 element isn't supported. The <video> is an example of this, as you can setup multiple video files and the browser will select one the first one that it supports, and browsers that don't support the HTML5 tag will just ignore it and move on, hopefully to find a third party plugin such as Flash instead.

HTML5 Implementation:

1) HTML5 Demos - With Source
2) HTML5 Video Implementation WIth Flash Fallback

More Information

1) Dive into HTML5
2) W3C - Official HTML5 Logo
3) W3C - HTML5 differences from HTML4

Compatibility Tests & Browsers Scores

1) Modernizr - HTML5 Compatibility Library/
2) css3 @font-face test
4) W3C HTML5 Compatibility Test
5) Browser Scope
6) Geolocation Test