This tutorial explains the 5 new features introduced in the HTML5. The features are new doctype, importing scripts and resources, image element tag, canvas element and the offline or local storage in the browser. There are many other great features in the HTML5, here I just give the overview of these 5 new features.
1. New Doctype
HTML5 has introduced the new doctype with minimal code. The old doctype reads as :
[code lang=”xml”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/code]
The new doctype is
[code lang=”xml”]
<!DOCTYPE html>
[/code]
2. No More Types for Scripts and Links
When you import scripts or style sheets we have to specify the type of the resources as the extra attribute.
[code lang=”xml”]
<link rel="stylesheet" href="theme.css" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
[/code]
These attributes are no longer necessary for HTML5 web pages. You can import the resources without specifying the types.
[code lang=”xml”]
<link rel="stylesheet" href="theme.css"/>
<script src="javascript.js"></script>
[/code]
3. The Figure Element
The old markup for image is
[code lang=”xml”]
<img src="image" alt="Image Text" />
[/code]
If you look at the above tag, there is no way to give the caption to an image and associate it. Only way is to add using the separate paragraph tag. With the HTML5’s new element figure, one can easily provide the semantic caption to an image.
[code lang=”xml”]
<figure>
<img src="image" alt="Image Text" />
<figcaption>
<p>Sample Caption Text</p>
</figcaption>
</figure>
[/code]
4. Canvas Element in HTML5
Read: Canvas Tag in HTML5
HTML5 element canvas gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations. This is one of the greatest feature in the HTML5.
[code lang=”xml”]
<canvas id="mycanvas" width="100" height="100"></canvas>
[/code]
Example
[code lang=”xml”]
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>
[/code]
It is very simple example of using the canvas element.
5. Local Storage
A major improvement in HTML5 is the local storage in the browser. . It allows an online application to work even if the user loses or disconnects their internet connection. For example, you would be able to compose a message in your webmail client even if you couldn’t find a WI-FI hotspot nearby.
Leave a Reply