An intro to HTML Version 5

HTML5 is the next version of HTML (as of September, 2011 it is still under development) which is for structuring and presenting content – just like in previous HTML standard but is more matured. Browsers already started supporting it, not completely but most features. You can start experimenting with latest IE, Firefox, Safari or Chrome.

Major elements to note are:

• Canvas – for drawing
• Video and Audio
• DOM storage – store data in browser
• Article, Footer, Header, Calendar, Time, Url, Search etc.

Few people say this will be a replacement for Adobe’s Flash or Microsoft’s Silverlight technology but we need to wait some more time to know more.

Here are few new elements for you to try out.

Canvas sample

<canvas id="testcanvas" width="100" height="100"></canvas> <script > element=document.getElementById("testcanvas"); context=element.getContext("2d"); gradient=context.createLinearGradient(0,0,100,100); gradient.addColorStop(0,"#0000ff"); gradient.addColorStop(1,"#00ff00"); context.fillStyle=gradient; context.fillRect(0,0,100,100); </script>

Video and Audio

<video controls="controls" src="MVI_0697.MOV"></video> <audio src="test.mp3" controls="controls"></audio>

Web Storage/DOM storage

<script type="text/javascript"> localStorage.test_var="Hello World"; alert(localStorage.test_var); </script>

Note: sessionStorage is also used same way.

You can read more about HTML5 here and here