HTML5 is the next generation of HTML that provides new features for webpages and web applications. It includes new semantic elements, forms, canvas, video and audio elements, geolocation, drag and drop, and local storage. While still a work in progress, HTML5 is supported by most modern browsers and offers powerful new capabilities for building interactive web content and applications.

1. HTML5
The next generation of HTML
By,
Kaushik Vinay T G

2. What is HTML5?
HTML5 will be the new standard for HTML,
XHTML, and the HTML DOM.
The previous version of HTML came in 1999.
The web has changed a lot since then.
HTML5 is still a work in progress. However, most
modern browsers have some HTML5 support.

3. New Features
The canvas element for drawing
The video and audio elements for media
playback
Better support for local offline storage
New content specific elements, like article,
footer, header, nav, section
New form controls, like calendar, date, time,
email, url, search

4. HTML5 Video/Audio
Until now, there has not been a standard for showing a Video/Audio on
a web page.
HTML5 defines a new elements which specifies a standard way to
embed a video/movie on a web page: the <video> element.
A standard way to embed a audio on web page: the <audio> element.
Currently, there are 3 supported video formats : MP4, WebM, and Ogg.
There are 3 supported audio formats:Mp3,Ogg, and Wav.
To show a video in HTML5, this is all you need:
Code:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
To show a audio in HTML5 is similar to the above code,Just replace
the video tag with audio tag and use an audio format instead of video
format mentioned in the code

5. HTML5 Canvas
The HTML5 canvas element uses JavaScript to draw graphics on a
web page
A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes,
circles, characters, and adding images.
A canvas element is added to the HTML5 page.
The canvas element has no drawing abilities of its own. All drawing
must be done inside a JavaScript
Code:
<canvas id="myCanvas" width="200" height="100"> A simple Canvas example
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

6. HTML5 Web Storage
HTML5 offers two new objects for storing data on the client:
LocalStorage - stores data with no time limit
SessionStorage - stores data for one session
Earlier, this was done with cookies. Cookies are not suitable for large
amounts of data, because they are passed on by EVERY request to
the server, making it very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but
used ONLY when asked for. It is possible to store large amounts of
data without affecting the website's performance.
The data is stored in different areas for different websites, and a
website can only access data stored by itself.
HTML5 uses JavaScript to store and access the data.
HTML5 Web storage is also called ”Cookies on Steroids”.

7. The localStorage Object
The localStorage object stores the data with no time limit. This means
data is still available when the browser is closed and reopened, and
also instantly between tabs and windows.
An example to count the number of times a user has visited a page
Code:
<script type="text/javascript">
if (localStorage.pagecount) {
localStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

8. The sessionStorage Object
The sessionStorage object stores the data for one session. The data
is deleted when the user closes the browser window.
Data in this storage is accessible to any page from the same site
opened in that window.
An similar example to count the number of times a user has visited a
page, in the current session.
Code:
<script type="text/javascript">
if (sessionStorage.pagecount) {
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
} else {
sessionStorage.pagecount=1;
} document.write("Visits "+sessionStorage.pagecount+" time(s) this
session.");
</script>

9. HTML5 Form Input Types
HTML5 has several new input types for forms. These new
features allow for better input control and validation.
The new input types:
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

10. HTML5 Form Input Types(Cont.)
Input Type – email
The email type is used for input fields that should contain an e-mail
address.
The value of the email field is automatically validated when the form
is submitted.
Code:
E-mail: <input type="email" name="user_email" />
Input Type – url
The url type is used for input fields that should contain a URL
address.
The value of the url field is automatically validated when the form is
submitted.
Code:
Homepage: <input type="url" name="user_url" />

11. HTML5 Form Input Types(Cont.)
Opera 10.50’s rendering of <input type=number>.
Input Type – number
The number type is used for input fields that should contain a
numeric value.
You can also set restrictions on what numbers are accepted.
Code:
Points: <input type="number" name="points" min="1" max="10" />

12. HTML5 Form Input Types(Cont.)
Google Chrome’s rendering of <input type=range>.
Input Type - range
The range type is used for input fields that should contain a value
from a range of numbers.The range type is displayed as a slider
bar.
You can also set restrictions on what numbers are accepted.
Code:
<input type="range" name="points" min="1" max="10" />

13. HTML5 Form Input Types(Cont.)
Input Type - search
The search type is used for search fields, like a site search, or
Google search.
The search field behaves like a regular text field.
Input Type - color <input type=color> on the BlackBerry.
The color type is used for input fields that should contain a color.
The Opera browser will allow you to select a color from a color
picker, Google's Chrome will only allow hexadecimal color values
to be submitted:
Code:
Color: <input type="color" name="user_color" />

14. HTML5 Form Elements
HTML5 has several new elements and attributes for forms.
The new form elements:
<datalist>
<keygen>
<output>
<output> Element
The <output> element is used for different types of output, like
calculations or script output:
Code:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

15. HTML5 Form Elements(Cont.)
<datalist> Element
The <datalist> element specifies a list of options for an input field.
The list is created with <option> elements inside the <datalist>.
To bind a <datalist> to an input field, let the list attribute of the
input field refer to the id of the datalist.
Code:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

16. HTML5 Form Elements(Cont.)
<keygen> Element
The purpose of the <keygen> element is to provide a secure way to
authenticate users.
The <keygen> element is a key-pair generator. When a form is
submitted, two keys are generated, one private and one public.
The private key is stored on the client, and the public key is sent to
the server. The public key could be used to generate a client
certificate to authenticate the user in the future.
Code:
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

17. HTML5 Form Attributes
This covers some of the new attributes for <form> and <input>.
autocomplete Attribute
The autocomplete attribute specifies that the form or input field
should have an autocomplete function.
When the user starts to type in an autocomplete field, the browser
should display options to fill in the field:
Code:
First name: <input type="text" name="fname" autocomplete=”on”/>
autofocus Attribute
The autofocus attribute specifies that a field should automatically
get focus when a page is loaded.
Code:
User name: <input type="text" name="user_name"
autofocus="autofocus" />

18. HTML5 Form Attributes(Cont.)
form Attribute
The form attribute specifies one or more forms the input field
belongs to.
The form attribute must refer to the id of the form it belongs to:
Code:
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" /></form>
Last name: <input type="text" name="lname" form="user_form" />
height and width Attributes
The height and width attributes specifies the height and width of
the image used for the input type image.
Code:
<input type="image" src="img_submit.gif" width="24" height="24" />

19. HTML5 Form Attributes(Cont.)
min, max and step Attributes
The min, max and step attributes are used to specify restrictions for
input types containing numbers or dates.
The max attribute specifies the maximum value allowed for the input
field.The min attribute specifies the minimum value allowed for the
input field.The step attribute specifies the legal number intervals for the
input field (if step="3", legal numbers could be -3,0,3,6, etc).
Code:
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple Attribute
The multiple attribute specifies that multiple values can be selected for
an input field.
Code:
Select images: <input type="file" name="img" multiple="multiple" />

20. HTML5 Form Attributes(Cont.)
novalidate Attribute
The novalidate attribute specifies that the form or input field
should not be validated when submitted.
If this attribute is present the form will not validate form input.
placeholder Attribute
The placeholder attribute provides a hint that describes the
expected value of an input field.
Code:
<input type="search" name="user_search" placeholder="Search
W3Schools" />
required Attribute
The required attribute specifies that an input field must be filled
out before submitting.
Code:
Name: <input type="text" name="usr_name" required="required" />

21. Drag And Drop
An image being Dragged and Dropped.
By default,all links, text nodes (or selections of), and image elements
are draggable. This means that you don’t have to do anything to tell
the browser they can be dragged around the page.
Our simple demo will have a drop zone and a couple of images that
you can drag into the drop zone. And when you drop them,the image
source will appear in the drop zone

22. Drag And Drop(Cont.)
Since there’s nothing to be done to the draggable images, you just need
to hook up the drop zone, which requires the following event handlers:
Drag over: Tell the browser this is an element that accepts drop data.
On drop: Once something has been dropped on the element, do
something with the dropped data.
Code:
<script>
var drop = document.getElementById(‘drop’);
drop.ondrop = function (event) {
this.innerHTML += ‘<p>’ + event.dataTransfer. getData(‘Text’) + ‘</p>’;
return false;
};
drop.ondragover = function () { return false; };
</script>

23. GEOLOCATION
The geolocation API gives us a way to locate the exact position of our
visitor.
Google Maps detects geolocation support and adds the “locate me” functionality
The geolocation API offers two methods for getting the geo
information from your user:
getCurrentPosition is a one-shot method for grabbing the user’s
current location.
watchPosition keeps an eye on their position and keeps polling at
regular intervals to see if their location has changed.
watchPosition mirrors getCurrentPosition’s functionality, but also if
the user’s position changes, it will tell your code.

24. Conclusion
Despite inconsistent browser implementations of its features,
HTML5 is an exciting technology for creating new and powerful
browser-based applications.
Unlike previous versions, HTML5 promises better integration of
multimedia and other applications inside the core of most Web
pages. While HTML5 adoption started off slowly, growing
evangelism from a number of leading vendors in the last six
months has spurred adoption by developers everywhere.

25. Thank You

26. References
 Introducing to HTML5 by Bruce Lawson and
Remy Sharp.
 www.w3schools.com
 www.codeproject.com
 To check the compatibility of the browser with
each element of HTML5, you can visit the site:
www.html5test.com