JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

5 New Features in HTML5

November 29, 2013 by Krishna Srinivasan Leave a Comment

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]

html5-canvas

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

Filed Under: HTML Tagged With: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved