HTML 5 Features

HTML5 ~= HTML + CSS + JS APIs

JavaScript Functions 

var els = document.querySelectorAll("ul li:nth-child(odd)");

We can use selectors to select elements in the document, Selectors can be CSS selectors or similar to Jquery selectors

window.localStorage['value'] = area.value;






We can store data in local database similar to google gears i.e how offline gmail works similar to that we can create many applications easily 
var db = window.openDatabase("Database Name", "Database Version");






We can access stored data from local database 

db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});






We can execute SQL queries like above 

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function(event) { alert(event.data); };

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

We can have Worker Class 

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

We can use sockets 

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

We can show notifications like "allow popup" dialog

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

We can drag and drop elements using JavaScript without any frameworks or extra js files (this was the feature i was looking for very long time )

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var options = { position: new google.maps.LatLng(lat, lng) }
    var marker = new google.maps.Marker(options);
    marker.setMap(map);
  });
}

We can show the use from where the user is logged in using any map service or we can set the locale information according the geolocation

HTML

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>

Many new rel values 

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

We can differentiate the property of the each span 

Dedicated UI:
              
<input type='range' min='0' max='50' value='0' /> 
<input results='10' type='search' /> 
<input type='text' placeholder='Search inside' /> 

Input Validation:

<style> :invalid { background-color: red; } </style>
<input type='color' /> 
<input type='number' /> 
<input type='email' /> 
<input type='tel' />   

We have many new controls (slider,searchbox,watermark) and validation for color names,number,email etc.,

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;

<video src='movie.mp4' autoplay controls></video>
document.getElementById("video").play();  

We can play audio and video without embedding players inside html 

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
  
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script> 

We can draw Image in the Canvas

CSS 

Selectors

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Row 1

Row 2

Row 3

Row 4

Image-like display

div {
  display: inline-block;
}

Specific attributes

input[type="text"] {
  background: #eee;
}

Negation

:not(.box) {
  color: #00c; 
}            
:not(span) {
  display: block; 
}  

More specific targetting

h2:first-child { ... }

div.text > div { ... } 
h2 + header { ... } 

@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}

div {
  text-overflow: ellipsis;
}

Animations 

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px; 
}        

border-radius: 0px; 

text-shadow: 
  rgba(64, 64, 64, 0.5) 
  0px 
  0px 
  0px; 
box-shadow: 
  rgba(0, 0, 128, 0.25) 
  0px 
  0px 
  0px; 
            

text-shadow: rgba(0, 0, 0, 0.5) 0 9px 9px; 

background: 
  -webkit-gradient(linear, left top, left bottom, 
                   from(rgba(200, 200, 240, 1)), to(rgba(255, 255, 255, 1)));

border-radius: 50px; 

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom, 
                   from(transparent), to(rgba(255, 255, 255, 0.23)));

Sample Sundar

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)

#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

• HTML5 = Next Generation Features for Modern Web Development
• See it today ?
• Chrome extensions/Firefox Jetpack/Safari extension

Please try in Google Chrome to view all the above features and animations to work or use Chrome Extensions