HTML5 – The Time Is Now!

If you’re into webdesign even in the slightest then you have heard of HTML5.  The new specification is gaining traction fast, and rightly so.  This new emerging trend  provides us with cleaner and improved markup code, improved semantics, elegant forms, and improved accessibility just to name a few of its many advantages.  While not all features are ready to use within all browsers now is the time to jump on the wagon and let the change over begin!  Still not convinced?  Lets take a look at a couple of the features that HTML5 is providing us!

Canvas

HTML5’s canvas feature allows us the designer or even your end user to draw / create graphics live on the screen.  Think of canvas in the literal sense, a medium for creating art.  Canvas allows you to draw paths, boxes, circles, text, and even add graphic images!  This has been introduced with the <canvas> tag.  The best way to appreciate this new feature is to dig in and get your mouse pointers dirty!  Try it out at http://www.w3schools.com/html/html5_canvas.asp

Audio / Video

HTML5 supports both audio and video files to be played right into the browser!  This comes loaded with its own features such as adding new text tracks and helps eliminate the native browser complications sometimes presented with embedding audio and video.  Both of these features also got there own tags which as you might have guessed it, <audio> <video>. To read a more in depth review of these new multimedia features and for a in-depth look into all the controls at your disposal check out http://code.tutsplus.com/tutorials/html5-audio-and-video-what-you-must-know–net-15545

What’s supported?

It can be hard to determine which features are available for which browsers, and as designers need to try and make sure the features we incorporate are at least available in the most popular browsers.  My “go to” resource for this is at caniuse.com.  This site is dedicated to not only HTML5 features but also CSS, SVG, JS API, and more.  You can simply search the feature and it will tell you exactly whats the 411 on that particular element.

canvas