5 New Features in HTML5

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The new doctype is

<!DOCTYPE html>

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.

<link rel="stylesheet" href="theme.css" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>

These attributes are no longer necessary for HTML5 web pages. You can import the resources without specifying the types.

<link rel="stylesheet" href="theme.css"/>
<script src="javascript.js"></script>

3. The Figure Element

The old markup for image is

<img src="image" alt="Image Text" />

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.

<figure>
	<img src="image" alt="Image Text" />
	<figcaption>
		<p>Sample Caption Text</p>
	</figcaption>
</figure>

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.

<canvas id="mycanvas" width="100" height="100"></canvas>

Example

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
}
</style>
</head>
<body>
   <canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>

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.

Read : A Simple Offline Web Application using HTML5

1. New Doctype

2. No More Types for Scripts and Links

3. The Figure Element

4. Canvas Element in HTML5

5. Local Storage

About Krishna Srinivasan