Your First HTML5 page


HTML5 introduces new elements and one of the most important of these elements is a <canvas> element. You can do a whole lot of thing with the <canvas> including lines, circles, background and others. We will use this <canvas> element to write our first HTML 5 code. Take a look at the following code.



<!DOCTYPE html>
<html>
<body>

<canvas width="300" height="200" style="border:2px solid #FF0000;">
</canvas>

</body>
</html>



Try this example Online


If you look at this code, it will look dry. So we strongly suggest that you take a look at this example in action online here. [ It opens in a new tab / windows, so you can come back ]

Congratulations !!! You have been able to go through and create your first HTML5 page.

Some Explanation

1. Doctype


The Statement

 <!DOCTYPE html5> 

Is a directive to the browser that the html type is html5 and not any other version like 4.01. Most browser support it and chances are, your html will work even if you omit this. But it is a good idea to keep it.

2. HTML5 Canvas element


The statement

<canvas width="300" height="200" style="border:2px solid #FF0000;"> 

Declares a canvas element of width 300 and width 200 with border style as 2 pixel in width and red in color.

Threre is nothing much glamorous about this canvas, but you got to know a new element type. In the coming pages we will spend a lot of time on canvas element, since it is one of the most important elements of the html5.