• Print
close

HTML5 : What? Why? How? and When?

Tech18_HTML5

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 🙂 😀

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Show 32 Comments

32 Comments

  • avatar image
    Khalid Janjua
    May 23, 2010 Reply

    sunil nice article about HTML5. Keep it up

    • avatar image
      Vinay Gowda
      May 23, 2010 Reply

      Surely we will come with come with good posts Khalid :) Thanks :)

  • avatar image
    Yogesh Mankani
    May 23, 2010 Reply

    Wow....Buddy that a great article on HTML5. You almost everything anybody need to use HTML5. Hats off mate :) .-= Yogesh Mankani´s last blog ..Top 10 Superb Browser-Based Games Which You Can Play For Free =-.

    • avatar image
      Vinay Gowda
      May 24, 2010 Reply

      There are still more in List Bro :) But these are worth mentioning. Thanks Yogesh :)

  • avatar image
    Rohit Sane
    May 24, 2010 Reply

    Thanks for this valuable info on HTML 5. It is going to be the next base for web designing, but I am still confused when to expect it to be accepted by all browsers! .-= Rohit Sane´s last blog ..Get dot COM domains in just 0.99$ at GoDaddy =-.

    • avatar image
      Vinay Gowda
      May 24, 2010 Reply

      Except IE all others are ready with HTML5 Rohit. Within 3-4months all browsers will be operating on HTML5. :)

  • avatar image
    Mirante
    May 24, 2010 Reply

    Don't understand why IE (the least standards compliant and the last to declare html5 support) is on top of the list.

    • avatar image
      Vinay Gowda
      May 24, 2010 Reply

      Because there is very good content which every developer love to see and learn :) So it obviously comes on top Mirate :)

  • avatar image
    Shabnam Sultan
    May 24, 2010 Reply

    Interesting article :) HTML5 is good foe web developers and designers . .-= Shabnam Sultan´s last blog ..Image Optimisation tips for your blog =-.

    • avatar image
      Vinay Gowda
      May 24, 2010 Reply

      Its very easy also Shabnam! Lot of changes in HTML5 and web developers will surely enjoy it :)

  • avatar image

    It's amazing how the HTML5 will change our internet experience, I have seen a 2 hours video explaining a lot of it's incredibly features! Thanks for the good post .-= Hesham @ How to Blog´s last blog ..Blog Visitors and Readers, What do you Know About Them =-.

    • avatar image
      Vinay Gowda
      May 24, 2010 Reply

      Yeah Hesham. I'm on your side! There are hell out of changes and Developers will love it for sure! Its so easy that even an no technical person can code his own site in no time!

  • avatar image
    Matchu
    May 24, 2010 Reply

    Why HTML5? Most definitely not to make your headings blurry and hard to read. No, wait, that's CSS3...

    • avatar image
      Vinay Gowda
      May 24, 2010 Reply

      You right Matchu :) Here i have just mentioned about HTML5 and its features! Hope you liked it :) Nice to see you here :)

  • avatar image
    mark
    May 25, 2010 Reply

    Hi Vinay, I have been looking forward to HTML5 for some time now. For me, the biggest benefit will be the local storage/access. That will (possibly) enable me to get rid of Air applications (nice). Of course, how each of the browser maker chooses to implement HTML5 is what concerns me. Like the different browsers' implementation of css and javascript, HTML5 could end up causing developers more headaches. Time will tell. Great post! Have a great day! .-= mark´s last blog ..Is Work/Life Balance just a scam? =-.

    • avatar image
      Vinay Gowda
      May 25, 2010 Reply

      Hi Mark, As i know there wont be any more Headache with HTML5 now because it will be a common platform for all browsers! All new Browser releases are compatible with HTML5. So there wont be any more problem. And many tags are replacing Flash contents as well. :) So I feel HTML5 will be the new revolution in webdesigning :) Nice to see you here Mark :)

      • avatar image
        mark
        May 25, 2010 Reply

        I have heard that, but I suppose I am a bit of a skeptic. I would love to see flash replaced, at least partially. Have a great day Vinay! .-= mark´s last blog ..Selling Rapture Insurance – Creative Thinking For a New Age =-.

        • avatar image
          Vinay Gowda
          May 31, 2010 Reply

          Not partially Mark..its gonna be replaced totally.. I don't there is future for Flash plugins after HTML5!!

  • avatar image
    Blooming Artificial Plants
    May 25, 2010 Reply

    Unbelievable features !!! this will minimize the coding effort and any fresher will develop our own simple site by doing a little effort.

    • avatar image
      Vinay Gowda
      May 27, 2010 Reply

      no wonder now a small kid can have its own site :) HTML5 has lot of new things!! hope this post has helped you :)

  • avatar image

    Very informative. Thanks for increasing my knowledge Vinay. .-= Arafat Hossain Piyada´s last blog ..Split search result for more productivity with Split.ly =-.

    • avatar image
      Vinay Gowda
      May 28, 2010 Reply

      always welcome bro :) we guys are here to share what we know thru our Blog :) lets keep up our work..

  • avatar image
    Dev | Technshare
    May 25, 2010 Reply

    Hey Vinay, Very Informative artcile. Awesome to know about html 5 :D. !! Thanks for sharing this great post.

    • avatar image
      Vinay Gowda
      May 27, 2010 Reply

      i'm glad that it helped you in knowing HTML5 Dev :) nice to see you here :)

  • avatar image
    David@Natural Sleep Aids
    May 26, 2010 Reply

    Wow! HTML5 is going to be great to use. Can't wait!

    • avatar image
      Vinay Gowda
      May 27, 2010 Reply

      No need to wait David :) just start it now :)

  • avatar image
    Mani Viswanathan
    May 31, 2010 Reply

    It ll be gr8 if HTML5 and HTML4 codes work together smoothly.. .-= Mani Viswanathan´s last blog ..FiveYears and still going smooth : YouTube =-.

    • avatar image
      Vinay Gowda
      May 31, 2010 Reply

      Both are working together Mani :) a child is following its ancestors to become successful :)

  • avatar image
    Mitch
    June 1, 2010 Reply

    I'm glad I read this to the end, because I was about to go try that video code. Course, I expect Firefox 4 will have it, but will IE 8 be able to handle it? At least now I know what it's all about; thanks. .-= Mitch´s last blog ..Sunday Question – Do You Have Someone Special To Think About On Memorial Day? =-.

    • avatar image
      Vinay Gowda
      June 4, 2010 Reply

      IE 8 is not supporting HTML5 features Mitch. IE 9 going to be big hit if you see through HTML5 features. :) Nice to see you here Mitch :)

  • avatar image
    ravi
    June 23, 2010 Reply

    Well written, but even after IE9 is released, most people will continue using IE7 and IE8.

    • avatar image
      Vinay Gowda
      June 23, 2010 Reply

      When IE7 and IE8 came most of the users were using IE6 only. Hope all will change to IE9 and enjoy this coolest features Ravi :) Thanks for sharing your thoughts :)

Leave a Reply

Story Page