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