Introduction
The intention of this post is to look at the changes in HTML5. HTML5 is the next revision of the language that is generally used to write content on the web. The new version of HTML has been compiled by The World Wide Web Consortium (W3C). The W3C is (in their own words) “an international community where Member organizations, a full-time staff, and the public work together to develop Web standards”. The new version of HTML boasts a number of new features that are useful.
Overview of Features
HTML5 has made a number of fundamental changes to the structure of the mark-up that is written. This can be seen in the new elements to denote the sections of the document. Previously, they would be the same element, i.e., a <div>
element. Now there are elements for each section. With the new section elements, there is the canvas
tag which allows rendering of 2D shapes on the page. These are not the only exciting new element, the addition of audio and video as well as offline storage allow the developer to bring the site alive without the use of third party plug-ins.
New Layout Tags
Let's begin with the new layout tags. W3C has introduced a number of new tags that allow the programmer to be able to embed music, video and graphics without the use of flash or Silverlight. Let us take a look a few of those tags and their usage and function.
Canvas Tag
The canvas
tag is used for rendering graphics on a page. The way you would draw on the canvas
is to define a canvas
object in the HTML, then define and draw the objects in JavaScript. Have a look at the sample:
HTML
<canvas id="canvasArea" width="500" height="500">
JavaScript
<script>
$(document).ready(function(){
var canvas = document.getElementById('canvasArea');
var context = canvas.getContext('2d');
context.fillStyle = '#909090';
context.fillRect(0,0,80,100); }
});
</script>
Audio Tag
The Audio
tag defines an audio stream that can played in the browser. The audio
tag allows a number of different formats. The following displays the use of the audio
tag:
<audio controls="Audiocontrol">
<source src="SourceFile.mp3" type="audio/mp3" />
</audio>
Local Storage
Local storage has long been used by applications to track and store information when a user is on the website. This has traditionally been stored in cookies. Before this, Google released Google gears which promised to store information on the client using an installed application on the users machine. HTML 5 storage works on the client browser without any 3rd party application. To use it, you would need to write JavaScript to fetch and store values in the following ways:
if(localStorage && !localStorage.Storage)
{
localStorage.Storage = "Store This";
document.write("<p>Storing Value: " + localStorage.Storage + "</p>");
}
document.write("<p>Stored Value: " + localStorage.Storage+ "</p>");
There is a limit on the amount of data that you would be able to store. There is a specification from W3C (link) on storage but it does not specify the limit. It looks as if it may be around 5MB, but this may vary. To make sure you don’t cause an error if the limit has been reached, use the following script:
try {
localStorage.setItem('Storage', 'value');
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
}
}
Here are some use operations for interacting with local storage:
if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
localStorage.removeItem('Storage');
localStorage.setItem('Storage', 'value');
Geolocation
With the growing use of smart internet enabled phones, geolocation can help a site to provide rich information to the user. This can be overlaid with a map service like Bing or Google to display any number of useful ideas. To use the geolocation feature in HTML5 is very easy:
$(document).ready(function(){
LoadGeolocation();
});
function LoadGeolocation() {
navigator.geolocation.getCurrentPosition(GeolocationPosition);
}
function GeolocationPosition(position){
var lat = position.coords.latitude;
var lon = position.coords.latitude;
}
Conclusion
As we have seen, there are some exciting features in the new version of HTML 5. I am sure that they will lead to an improved user experience. Have fun!