Introduction

If you are new to HTML 5, I suggest you read my first part article here: HTML 5 Elements in a Look: Part 1.
New Attribute syntax
In HTML 5, we have new attribute syntax as in the following:
Example
We can assign the text property of an input type as follows.
To make IE lower versions to read HTML5 elements:
Add The Shiv
  1. <!--[if lt IE 9]>
  2. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  3. <![endif]-->
Apply CSS to Elements
Since we can apply styles to our normal HTML4 elements, we can apply styles to our new semantic elements too.
Example:
  1. footer{border:1px solid;}
The preceding style will be applied to all the footers available on a page.
NB: Please be noted that it is not recommended (Footer, FOOTER) to use the upper-case in the elements.

Introduction to Canvas Element

If you want to create some graphic content, the Canvas element is the right choice.
Let us see how to use it.
Declaring the Canvas
  1. <canvas id="canvasExample" width="200" height="100"
  2. style="border:1px solid #ccc;">
  3. Bad Luck, It seems your browser won't support :(
  4. </canvas>
Implementing Canvas
  1. var c = document.getElementById("canvasExample"); //Get the element
  2. var ctx = c.getContext("2d"); // Get the context for the element
  3. var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
  4. grd.addColorStop(0, "blue"); // Apply the colors
  5. grd.addColorStop(1, "white"); // Apply the colors
  6. ctx.fillStyle = grd; //apply the style
  7. ctx.fillRect(10, 10, 150, 80); // Fill
Here we are applying the gradient to the canvasExample canvas.

Introduction to SVG

Scalable Vector Graphics is for implementing graphics for the web as the canvas. One of the differences between canvas and SVG is that SVG supports event handlers but canvases don't. We will discuss that later.
Declaring SVG
  1. <canvas id="canvasExample" width="200" height="100"
  2. style="border:1px solid #ccc;">
  3. Bad Luck, It seems your browser won't support :(
  4. </canvas>
See the complete HTML here:
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <table style="border:1px solid #ccc;">
  5. <tr style="border:1px solid #ccc;">
  6. <td style="border:1px solid #ccc;">
  7. <h2 style="text-align:center;">Canvas</h2>
  8. <canvas id="canvasExample" width="200" height="100"
  9. style="border:1px solid #ccc;">
  10. Bad Luck, It seems your browser won't support :(
  11. </canvas>
  12. </td>
  13. <td style="border:1px solid #ccc;">
  14. <h2 style="text-align:center;">SVG</h2>
  15. <svg width="200" height="200">
  16. <circle cx="100" cy="100" r="50"
  17. stroke="green" stroke-width="4" fill="yellow" />
  18. Bad Luck, It seems your browser won't support :(
  19. </svg>
  20. </td>
  21. </tr>
  22. </table>
  23. <script>
  24. var c = document.getElementById("canvasExample"); //Get the element
  25. var cctx = c.getContext("2d"); // Get the context for the element
  26. var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
  27. grd.addColorStop(0, "blue"); // Apply the colors
  28. grd.addColorStop(1, "white"); // Apply the colors
  29. ctx.fillStyle = grd; //apply the style
  30. ctx.fillRect(10, 10, 150, 80); // Fill
  31. </script>
  32. </body>
  33. </html>
I hope you have tried this. See you soon with another set of elements in the next article.
Kindest Regards
Sibeesh