Here is a summary of a talk we attended on Day 1 of Confoo 2012.
The HTML5 Landscape by Andrew Lombardi
HTML5 was introduced in 2009 and its logo was finalized in 2011. Even though it’s been around for a while, few developers actually use it fully in their projects. The features of HTML5 are quite exciting but sadly don’t fully work on all the available browsers.
Andrew Lombardi is a great speaker and it was interesting to hear his thoughts on what HTML5 can do. Here are the key features:
Mobile
If you want to work in the mobile space, HTML5 is the way to go especially when it comes to media.
Clean Coding
Andrew compared the old way to the new way of setting up a new HTML file. One striking example is the doctype declaration.
The Old Doctype (one of the 3 HTML4 doctypes)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">The New Doctype
<!DOCTYPE HTML>Boolean Markup
The new markup means no more redundancy in the code. For a false value, you simply have to omit the attribute and for the value to be true, add the attribute to the tag.
Before <input type="checkbox" name="cheese" checked="checked" disabled="disabled" /> Cheese
After <input type="checkbox" name="cheese" checked disabled /> Cheese
Video and Audio
Video
The arrival of HTML5 has brought a few different video formats: Ogg, H.264 and WebM/VP8. They all work on different browsers and versions so it’s a bit tricky to choose one.
Using the new video and audio tags can be interesting for a direct Javascript access: document.getElementById('media').play();
You can also develop some HTML5 tests for your media like this: return !document.createElement(‘video’).canPlayType();
You can also use the Modernizr Library for complete access to HTML5 features and tests on its availability.
Big upside: using the video tag for an HTML5 video player brings native control depending on what browser you are on. So if you are on Safari, it will look like the Quicktime format you already use and it makes it quite user-friendly.
Audio
The HTML5 audio formats are Ogg, MP3 and WAV. Once again, they all work on different browsers and versions.
In general, it’s no fun to use video and audio tags for now as you need to reference your file in each type of video format plus a flash embed so that it can play on any browser or mobile.
Canvas
Canvas is a new HTML5 feature and its possibilities are endless. We have seen several games being developed in canvas in the last two years including Mario Bros!
On my side, I had fun coding a function that would draw a header image in a canvas to get the RGB value of a certain pixel so I could build my CSS based on that main colour. Pretty cool, eh!
A few things to know:
- Coding can look like Java for developers who already know the language.
- Any markup between a canvas box will show if canvas isn’t supported.
Forms
The HTML5 forms will be a lot simpler and will make more sense to developers.
Input types: date, colour, number, search, email, url… Input variables: autofocus, autocomplete, placeholder…
Sadly, the HTML5 forms will only be supported in Internet Explorer 10 and iOS5 so for full use on your website, you may want to wait if the majority of your visitors are on older browsers.
Semantic Tags
A big part of HTML5 will be the arrival of new semantic tags to use smart tags like section, nav, article, and header instead of a ton of div with names that don’t always make sense.
Internet Explorer 9, Firefox 3, Safari 3.2, iOS4 and Chrome 4 support those new tags.
Conclusion
Once again, most IE users are not even on IE9 yet so what to do? Andrew recommends using conditional JavaScript (SHIV) to make it work. It creates elements in the DOM that can then be referenced in the code.
On my side, I believe there are two answers. If you are developing a site for yourself and want to show off your skills then go for it and code fully in HTML5!
If you are building websites for clients and the main goal is to make sales or share information, code in what you know will work everywhere. Making a cool page means nothing if the visitor can’t do what he’s meant to.