When we started learning  HTML – core language of WWW(World Wide Web), We might have thought what all junks they have written here! As days went , many made it as their main-stream and started digging more about it. And even we went through new technologies like jQuery, Joomla and many more. But still there are many complexities in writing a single normal HTML page! Just to include a header we had to write some 15 or odd lines. But recently W3C introduced an update to this technology. A enhancement of HTML 4.01 to 5, which many people said “lines reduced and creativity increased”.

So lets get to know more about HTML5 by answering four easy questions which each and every users asks us :

1. What is HTML5?

   The very first question which comes into your mind when you heard about it . HTML 5 is a new version of HTML / XHTML which specifically focuses on the wants and needs of web app developers. W3C has implemented many new features to reduce your coding time.

2. Why HTML5?

   There are many new features are included in HTML5. Just take a tour of it here,

   • Video :  Before when we wanted to embed and play a video on our site we had to embed it by writing lengthy code as below:

        1:  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="840" height="100">

        2:  <param name="movie" value="images/1.swf" />

        3:  <param name="quality" value="high" />

        4:  <embed src="videos/banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="840" height="100"></embed>

        5:  </object>

     But Now just by adding 3 lines of codes , you can embed and play a video.

        1:  <video>

        2:  <source src="videos/video1.mp4" />

        3:  </video>

     Have a look at this site which is using the above code : jilion.com

     Advantage: video plug-ins and flash plug-ins are not required anymore. Play any video format you like. 🙂

   • Audio : Previously there was option to add only few formats of audio files or we had to embed few players to play all formats. Now with HTML5 Audio feature you play any kind of audio files with just few lines. Look at the code you need to add

        1:  <audio src='audio.ogg controls="controls">

        2:  Play Audio

        3:  </audio>

   • Canvas : Canvas is a powerful utility using which you can draw graphics with the help of JavaScript. Canvas are very useful when you want to show some reports, animations, charts etc. Have a look at few canvas examples, Canvas with animation Canvas with Gradients One of the best feature added in HTML5 is “Canvas and Video“. You can play 2 videos next to next as explained before, but difference is you can play the reflection of 1st video.
     

     Advantage: Play more with graphics with minimal use of JavaScript.

   • Movable Contents: HTML5 says drag and drop whatever you like, customize your page as you like. Few months back Google implemented drag and drop feature for file attachments with Gmail. Few people didn’t close their mouth when they saw this feature in Gmail. Now its all easy for any web developer to add this feature! Previously when I used this drag and drop feature in one of my website I used jQuery, which made to include many JavaScript’s and obviously page took lot of time to load!! Now its all easy with HTML5. Have look a Drag and Drop feature here. And see how it can be used with Text here.
     

     Advantage: Make your visitors happy with the page how they like.

   • Document structure: When it comes to designing structure for your page, HTML5 has made lot of changes and it is very easy. Now a small kid code its own page with the HTML5 changes. Many new tags like, <header></header> <nav></nav> <article></article> <footer></footer> are added in HTML5.You can have a look at new tags introduced in HTML5 and also few tags which are not supported by HTML5 . Now very less time  it will take you to design single page :).
     

     Advantage: Save your precious time with the reduction is page code 🙂

   • Edit without Editor: Sounds weird right? Yes, you right. With HTML5 you can edit the content of your page without opening your page in some editor. You can call it as On-Page Editor. See how to Edit without Editor here.
     

     Advantage: why you need editors?

   • Work when Offline: Work when offline feature allows you to find whether the browser is working fine, allows you to work without internet connection by storing cookie or cache files. HTML 5 increases functionality for storing web based information locally on your machine. When your net disconnected the new HTML5 features gets the status of the net and enables work offline feature so that you continue with your work.
     

     Advantage: Show your site to someone when your net is disconnected.

   Visit www.findmebyip.com from Firefox 3.5 or more to know cool new features of HTML5

3. How can i use HTML5?

   As HTML5 has vast changes in coding structure it demands every developer to go through it before using it. There are many new added tags like header, article, nav, footer, canvas. There are lot of changes also made in existing tags. So I recommend you to please go through HTML5.

   We suggest: www.dev.w3.org/html5/html-author/

4. When can i use HTML5?

If you ask me this question I say, RIGHT NOW! Although your current browser doesn’t support HTML5 features I recommend you to be ready with HTML5 so that you can kick start with it. By the end of this year all your browsers will be ready with HTML5 as their next release will change the future of WWW. Just take a tour with next release of browsers which supports HTML5,

Internet Explorer 9

Google Chrome 5

Firefox 3.6 (Ready with few HTML5 Features. Firefox 4 is still under development)

Opera 10.53 (Ready with few HTML5 features)

Safari 4 (Ready with few HTML5 features)

We suggest: www.caniuse.com

Thanks for reading. What do you think about HTML5 ?, We would love to get your feedback 🙂 😀