TechNet Express: What is New in HTML 5

HTML 5 is new emerging web standard (still under development) that is primarily targeted to eliminate the requirement of third party browser plug-ins like Adobe Flash to play various graphics and media content rendering and play back

Belwo are quick recap of some well known feature of proposed HTML 5 specification set , a lot of them has already been adapted by leading browsers.

New Elements

The <canvas> element for 2D drawing
The <video> and <audio> elements for media playback
New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search

Several new input types

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Form Elements

<datalist>
<keygen>
<output>

Video and Audio

Until now, there has not been a standard for showing a video/movie on a web page.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
The HTML5 <video> element also has methods, properties, and events.
There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set.
There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.

2D/3D Graphics

<canvas>

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics.
A canvas is a drawable region defined in HTML code with height and width attributes.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)

Canvas and SVG

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Best suited for graphic-intensive games where many objects are redrawn frequently	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

Local Storage

With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.
It is also possible to store large amounts of data, without affecting the website's performance
There are two new objects for storing data on the client:

localStorage - stores data with no expiration date
sessionStorage - stores data for one session The data is stored in key/value pairs, and a web page can only access data stored by itself.

Web Applications

Application Cache

With HTML5 it is easy to make an offline version of a web application, by creating a cache manifest file.
Application cache gives an application three advantages:

Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server

Web Worker (Async Support)

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
Web workers are supported in all major browsers, except Internet Explorer.

Server-Sent Events

A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available.
With server-sent events, the updates come automatically. Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Drag and Drop

In HTML5, drag and drop is part of the standard, and any element can be draggable.

Geo Location

The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
Geolocation is much more accurate for devices with GPS, like iPhone.