HTML5 : What? Why? How? and When?

May 23rd, 2010 by Vinay Gowda

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 :

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.
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
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/
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: cab version, cabs, clsid, complexities, core language, drag and drop, drap, drop, embed src, enhancement, Google Chrome, gt 2, gt 4, html page, HTML5, Internet explorer 9, main stream, new features, object classid, odd lines, offline, Opera, param name, quot, shockwave download, swf, w3c, x shockwave flash
Posted under: Internet, www

Written by Vinay Gowda :)

I am a self made programmer. Co-owner of the Tech18 blog. Very passionate and eager to know new technologies, which made me to step into blogging world. You can find me FB with user name "vinay gowda". Follow me on twitter @tech18blog .

Vinay Gowda has written 40 articles.

38 Responses to “HTML5 : What? Why? How? and When?”

Tweets that mention HTML5 : What? Why? How? and When? Internet -- Topsy.com says:

May 23, 2010 at 6:19 pm

[...] This post was mentioned on Twitter by Sri Ganesh.m, Rahul Banker, sunil jain, Sonu Kothari, BloggingJunkie and others. BloggingJunkie said: RT @gupshupblog: #HTML5 : What? Why? How? and When? | http://su.pr/2MQ7om #Internet [...]
Khalid Janjua says:

May 23, 2010 at 8:10 pm

sunil nice article about HTML5. Keep it up

[Reply]
Vinay Gowda Reply:
May 23rd, 2010 at 11:04 pm
Surely we will come with come with good posts Khalid

Thanks

[Reply]
Rohit Sane
Twitter: techfreaks
says:

May 23, 2010 at 9:29 pm

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

[Reply]
Vinay Gowda Reply:
May 23rd, 2010 at 11:12 pm
Except IE all others are ready with HTML5 Rohit. Within 3-4months all browsers will be operating on HTML5.

[Reply]
Shabnam Sultan
Twitter: shabnamsultan
says:

May 23, 2010 at 11:21 pm

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

[Reply]
Vinay Gowda Reply:
May 24th, 2010 at 2:55 am
Its very easy also Shabnam! Lot of changes in HTML5 and web developers will surely enjoy it

[Reply]
Yogesh Mankani says:

May 23, 2010 at 11:35 pm

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

[Reply]
Vinay Gowda Reply:
May 24th, 2010 at 2:56 am
There are still more in List Bro But these are worth mentioning. Thanks Yogesh

[Reply]
HTML5 : What? Why? How? and When? Internet | AboutBrowsers.info says:

May 23, 2010 at 11:43 pm

[...] Read this article: HTML5 : What? Why? How? and When? Internet [...]
Hesham @ How to Blog
Twitter: FamousBloggers
says:

May 23, 2010 at 11:52 pm

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

[Reply]
Vinay Gowda Reply:
May 24th, 2010 at 2:59 am
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!

[Reply]
Matchu says:

May 24, 2010 at 1:54 am

Why HTML5? Most definitely not to make your headings blurry and hard to read.

No, wait, that’s CSS3…

[Reply]
Vinay Gowda Reply:
May 24th, 2010 at 3:00 am
You right Matchu Here i have just mentioned about HTML5 and its features! Hope you liked it Nice to see you here

[Reply]
Mirante says:

May 24, 2010 at 3:51 am

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

[Reply]
Vinay Gowda Reply:
May 24th, 2010 at 8:49 am
Because there is very good content which every developer love to see and learn So it obviously comes on top Mirate

[Reply]
learning » Twitter Trends says:

May 24, 2010 at 4:24 am

…

anyone interested in learning HTML 5, here is a good link explaining the changes from 4.01…
mark
Twitter: icebluebanana
says:

May 24, 2010 at 7:51 pm

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?

[Reply]
Vinay Gowda Reply:
May 24th, 2010 at 8:04 pm
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

[Reply]
mark
Twitter: icebluebanana
Reply:
May 25th, 2010 at 8:29 am
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

[Reply]
Vinay Gowda Reply:
May 31st, 2010 at 3:12 pm
Not partially Mark..its gonna be replaced totally.. I don’t there is future for Flash plugins after HTML5!!
Interesting Reading #495 – X-51 ordinary-fuel scramjet, Electric feedback on touchscreen, Cheap gesture UI, Seven atom transistors, Facebook vs. Canada, Latest version of Little Dog, Walking across Europe, Mark Twain’s autobiography, Giant GPS says:

May 25, 2010 at 3:36 am

[...] HTML5 : What? Why? How? and When? – “So lets get to know more about HTML5 by answering four easy questions which each and every users asks us…” [...]
Arafat Hossain Piyada
Twitter: worthytips
says:

May 25, 2010 at 7:31 am

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

[Reply]
Vinay Gowda Reply:
May 27th, 2010 at 11:05 pm
always welcome bro we guys are here to share what we know thru our Blog lets keep up our work..

[Reply]
Blooming Artificial Plants says:

May 25, 2010 at 12:52 pm

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

[Reply]
Vinay Gowda Reply:
May 27th, 2010 at 11:06 pm
no wonder now a small kid can have its own site HTML5 has lot of new things!! hope this post has helped you

[Reply]
Dev | Technshare says:

May 25, 2010 at 1:42 pm

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

[Reply]
Vinay Gowda Reply:
May 27th, 2010 at 11:08 pm
i’m glad that it helped you in knowing HTML5 Dev nice to see you here

[Reply]
David@Natural Sleep Aids says:

May 26, 2010 at 10:03 pm

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

[Reply]
Vinay Gowda Reply:
May 27th, 2010 at 11:08 pm
No need to wait David just start it now

[Reply]
Mani Viswanathan
Twitter: tospost
says:

May 31, 2010 at 9:11 am

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

[Reply]
Vinay Gowda Reply:
May 31st, 2010 at 3:14 pm
Both are working together Mani a child is following its ancestors to become successful

[Reply]
Mitch says:

June 1, 2010 at 7:50 am

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?

[Reply]
Vinay Gowda Reply:
June 4th, 2010 at 10:57 am
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

[Reply]
100+ Cool new features of iPhone 4 says:

June 9, 2010 at 2:38 am

[...] HTML5 Client-Side Storage in Safari: The advanced Safari browser included in iPhone OS supports the latest HTML5 offline data storage features. The offline storage means a web app can store session data locally in a cache on the iPhone or iPod touch device, using either a simple key/value data API, or a more advanced SQL interface. The data is persistent among Safari launches, meaning apps start up faster, are less dependent upon the network, and perform better than ever before. [...]
ravi
Twitter: techyag
says:

June 22, 2010 at 7:45 pm

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

[Reply]
Vinay Gowda Reply:
June 23rd, 2010 at 8:18 am
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

[Reply]
Tab Candy - Firefox's next big innovation says:

August 5, 2010 at 9:46 am

[...] 2010 has seen lot of changes in web-world. All web browsers released their new versions to support HTML 5 features. Many new browsers came into picture like Epic browser from India. There are lot of happenings in [...]