1. Forms
2. New tags
3. JSON support
4. Geolocation
5. Including video
6. Canvas
   - Transformations
   - Clearing canvas
7. Local storage
   - Local storage events
   - Session storage
8. Indexed DB
   - Creating store (table)
   - Manipulating data
9. Offline apps

Not all features are implemented by all browsers. Differences can be found here

1. Forms

New input types that can be handled by browsers:
email - validates email addresss
color - allows to choose a color
date - validates date and allows to select it
spellcheck - validates text
pattern - allows data validation via regular expressions

2. New tags

HTML 5 introduces new tags that helps better to organize and understand the structure of the document

<nav>  // navigation element
HTML 5 also remove some elements like


3. JSON support

JSON is natively supported by browser

// convert object to JSON
var person = { name: "Zbynek" }
var jsondata = JSON.stringify(person); // "{ \"name\": \"Zbynek\" }"

// create object from JSON
var person1 = JSON.parse(jsondata);
var name =;

4. Geolocation

    <script type="text/javascript" src="../scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript">
        $(function () 
            if (!navigator.geolocation)
                alert("This browser doesn't support geolocation");
                navigator.geolocation.getCurrentPosition(onPositionReady);  // you can add error handling callback as well  

        function onPositionReady(position) 
            document.getElementById("Latitude").innerHTML = position.coords.latitude;
            document.getElementById("Longitude").innerHTML = position.coords.longitude;
            // you can read more position properties
   <div id="Latitude">Lat</div>
   <div id="Longitude">Long</div>

5. Including video

Only IE and Safari support MP4 as of 3/2014

<video id="output" controls>
    <source src="myvideo.MP4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2" />
    HTML5 video is not supported in your browser

6. Canvas

Canvas allows drawing graphical objects inside of browser content

  <canvas id="canvas" width="640" height="480" style="background-color: White; border: 1px dotted black"></canvas>

var canvas = document.getElementById("canvas");
var dc = canvas.getContext("2d");


dc.translate(100,0);  // move x,y
dc.rotate(30 * Math.PI / 180);  
dc.scale(2, 1);  // scale x,y
dc.setTransform(1, 0, 0, 1, 100,100) // x scale, x skew, y, skew, y scale, x translate, y translate

Clearing canvas

// erases content, but keeps properties (transfom)

// erases content and resets canvas properties. 
// It works accros browsers based on HTML5 specification 
canvas.width = canvas.width;

7. Local storage

Code example:LocalStorage

Client side Key-value storage
Quota provided by browser varies from 5-10MB
In IE 11 does not work if html file opened from file system, needs to be http://

// write = "abc";
var x =;

// read
window.localStorage["my"] = "abc";
var x = window.localStorage["my"];

// array
var point = [1,2];
var coords = point.split(",");
var x = parseInt(coords[0]);

// iterate
for (int i=0; i<window.localStorage.length; i++)
  var key = window.localStorage.key[i];
  var value = window.localStorage[key];

// remove
Webworkers cannot access local storage (window object is not accessible)

Local storage events

window.addEventListener("storage", onStorageChanged, false);
function onStorageChanged(e) 
  // e.key
  // e.oldValue
  // e.newValue
  // e.url

Session storage

Persists only during the session time. Should fire an event (according to spec).

window.sesionStorage["my"] = "abc;

8. Indexed DB

Indexed DB allows storing and querying client side data. Specification:
Code example:IndexedDb

Creating store (table)

Delete an object in the DB requires new version of the DB.
All schema changes can be done within onupgradeneeded handler.
No access to IndexedDB from C# when building Windows store apps

$(function () {
    var request ="MyDB", 1);  // 1 is version of the DB  

    request.onupgradeneeded = function (e)
        // all schema changes can happen only here
        var db =;

        var store = db.createObjectStore("persons", { autoIncrement: true });
        store.createIndex("myindex", "name");    // , { unique : true }
        // if autoincrement is not used, a field can be used as unique identifier
        // var store = db.createObjectStore("persons", { keyPath: "uniqueFieldName" });  

        // db.deleteObjectStore("persons");  // delete the store if needed

Manipulating data

var request ="MyDB", 1);

request.onsuccess = function (e) {
  // get store object
  var db =;
  var tran = db.transaction(["persons"], "readwrite");  // transaction may include more stores
  var store = tran.objectStore("persons");

  // read object by key
  store.get(2).onsuccess = function (e) {  // 2 is key
    // report success here
  // iterate all items
  store.openCursor().onsuccess = function (e) {
    var cursor =;
    if (cursor) {
        var key = cursor.key;
        var person = cursor.value;

  // Update person object
  store.put( { name: "Old person" }, 1 );  // 1 is key

  // Add person object
  store.add( { name: "Next person" } );

  // Delete 
  store.delete(1);  // 1 is key
You can also create case sensitive Indexes or use transactions

9. Offline apps

With the specification below the browser will download and cache specified files so that they are available when the client does not have internet connection. Create a manifest file my.manifest

# comment
Update html file

<html manifest="my.manifest">
Refreshing file by browser requires changing at least one byte in the manifest file

applicationCache.addEventListener("updateready", onUpdateReady, false);

function onUpdateReady(e) {
IIS: map file extension .manifest (can be arbitrary extension) to "text/cache-manifest" in IIS