Numerous articles have been written about HTML 5 over the last year, so I won’t spend a ton of time delving into the gritty details. If a client is asking, or thinking about suggesting this technology, these 8 things might play a vital role in the conversation. Simply put, here are some of the big things you need to know about HTML5 as it stands today.
1. Won’t break your old site
That is to say – your old code is going to work! Need to use a div, p, span tag…they work.
2. More Semantic
The new semantic elements aid in the consistency for page layout. Think of it as a better way to outline a page.
3. Canvas
Basically, a drawing surface allowing for movable shapes and graphics through scripting.
4. Mobile Now
Mobile devices offer something the PC doesn’t – a controlled environment, that means modern browsers, and that means browsers that can read HTML5. With iOS and Android – you can pretty much hone in there and do a really nice job at utilizing many features of HTML5. More importantly, the numbers for these devices are growing.
5. Power to the browser, not the plugin
Doing things the web way make your pages feel like the web, work like the web, be like the web. If we’re comparing HTML5 to say Flash to handle moving graphics through canvas, those named items can be searchable, and better yet, because HTML5 is being developed as an open standard – no vendor lock in.
6. IE Still Rules the Roost
You’ve got to know your limitations when working w ith new technology, and for all the good, here’s some bad. IE6, IE7, and IE8 do not support HTML5. As of today, that’s about 50% of the audience. There is a glimmer of hope however, scripts like modernizr are helping, allowing IE5+ to utilize the new elements, but not the new functionality. (like canvas, video etc.)
7. Codecs Matter
It’s probably the biggest battle for HTML5 to fight –codec support. Here’s the quick rundown of where they are today (we’ll limit this to the Big 4 IE, FF, Safari and Chome, and the 2 major phone OS’s):
- IE6-8: None
- IE9: h.264
- Firefox 3.5: Ogg Theora
- Firefox 4.0 beta: Ogg Theora, VP8
- Chrome5:Ogg Theora, H.264
- Chrome6:Ogg Theora, H.264, VP8
- Safari 5: H.264
- IOS: H.264
source: http://en.wikipedia.org/wiki/HTML5_video
Different codecs for different browsers and operating systems. This doesn’t mean you can serve them all, it just means you’ll have to do quite a bit more encoding with maybe a little help.
8. HTML5 Can Be Used Today
It's true. Technically.
Really...it's true.
By simply adding <!DOCTYPE html> as the doctype, all the big browsers will render in standards mode. Since all your old code will work, you're technically using HTML5.
If you want to use the new stuff, then it gets more slippery. You "could" use input type="search" - one of the new form attributes in HTML5, and browsers that don't support that input type, will default to type="text", which is what we would have used anyway. Lastly, if you're not interested in using the modernizr script for the new semantic tag usage, developers can use classes like class="footer", getting developers to think like the native semantic elements of HTML5.
Thanks, Jason. Nice post.
Posted by: Brandon Anderson | 07/19/2010 at 09:16 PM