HTML5 tags are already supported in the major modern internet browsers. We have to know and exploit the new powerful features provided built-in with the browser, instead of implementing the same functionality with the most unfriendly JavaScript libraries or even worse - with adobe flash.
Microsoft bans adobe from their windows 8 for tablet OS, flash clients are not supported at all in the iPhone OS. The current (probably long lasting) trend is to adopt standards where applicable and to optimize the integration of graphics rich content with the browser in mobile devices and desktop systems.
So now that we acknowledge the advantages of that technology it's time to overview some of the main benefits of it.
1. The progress bar.
The progress bar can be useful e.g. if we upload a file and get the number of bytes uploaded so far with AJAX requests.
All we need to do for it to work properly is to write it this way:
<progress value="22" max="100"></progress>
All we need to do for it to work properly is to write it this way:
<progress value="22" max="100"></progress>
and the result is:
2. The video
Embedded video is usually implemented with the object tag which calls for some type of activeX or other client like Silverlight, Adobe Flash or even Windows Media Player.
Well, no longer. All you have to do is to write the video tag and specify the content type it should play.
<video source="someVideo.mp4" type="video/mp4"> </video>
The attributes allow you to mute the audio, autoplay and display controls.
src="http://code.darina.us/uploader/userFiles/final.ogg" media="video/ogg"/>
Chrome and Internet Explorer 9 support H.264 format (MP4) while Firefox and opera support the ogv (theodora). Until firefox realizes it has lost the battle we might expect some inconvenience as web developers, providing two encodings for each video item.
3. The audio
Essentially the same as 2.
<audio source="someAudio.mp3" type="audio/mp3"> </audio>
4. The canvas
The canvas allows you to draw dynamically various objects using the javascript. There is no need to interact with images if all you need is to draw some simple pattern. However since the drawing is done on the client machine - you actually boost the performance of your webpages.
<canvas id="someCanvas" />
5. The mark
Marking a text is achieved with one simple tag:
Long text, <mark> important </mark> end of text
And the result is
Log text, important end of text.
6. The local storage.
If are web developers who want to have a persistent data for a domain we would probably use cookies which in turn have some major drawbacks:
It is limited to 4 KB.
It is transmitted to the server in every http request and goes back with every http response. It is insecure and can be intercepted if not used with SSL.
Moreover, the user can prevent websites from using cookies at all.
The solution in HTML5 is the use of local storage within the browser itself. "localStorage" is an object of the window and is supported in most of the modern browsers. You can store your data in a key-value pairs up to 5 MB in total.
Use this statement to check if the browser supports local storage:
localStorage["MyKey"] = "Test";
2. The video
Embedded video is usually implemented with the object tag which calls for some type of activeX or other client like Silverlight, Adobe Flash or even Windows Media Player.
Well, no longer. All you have to do is to write the video tag and specify the content type it should play.
<video source="someVideo.mp4" type="video/mp4"> </video>
The attributes allow you to mute the audio, autoplay and display controls.
src="http://code.darina.us/uploader/userFiles/final.ogg" media="video/ogg"/>
Chrome and Internet Explorer 9 support H.264 format (MP4) while Firefox and opera support the ogv (theodora). Until firefox realizes it has lost the battle we might expect some inconvenience as web developers, providing two encodings for each video item.
3. The audio
Essentially the same as 2.
<audio source="someAudio.mp3" type="audio/mp3"> </audio>
4. The canvas
The canvas allows you to draw dynamically various objects using the javascript. There is no need to interact with images if all you need is to draw some simple pattern. However since the drawing is done on the client machine - you actually boost the performance of your webpages.
<canvas id="someCanvas" />
5. The mark
Marking a text is achieved with one simple tag:
Long text, <mark> important </mark> end of text
And the result is
Log text, important end of text.
6. The local storage.
If are web developers who want to have a persistent data for a domain we would probably use cookies which in turn have some major drawbacks:
It is limited to 4 KB.
It is transmitted to the server in every http request and goes back with every http response. It is insecure and can be intercepted if not used with SSL.
Moreover, the user can prevent websites from using cookies at all.
The solution in HTML5 is the use of local storage within the browser itself. "localStorage" is an object of the window and is supported in most of the modern browsers. You can store your data in a key-value pairs up to 5 MB in total.
Use this statement to check if the browser supports local storage:
'localStorage' in window && window['localStorage'] !== null;localStorage["MyKey"] = "Test";