- <code>Gopinath T.M</code>

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

The canvas element for drawingThe video and audio elements for media

playbackBetter support for local offline storageNew content specific elements, like article,

footer, header, nav, sectionNew form controls, like calendar, date, time,

email, url, search

Document

DOM

HTML 5

text/html

XHTML 5

application/xhtml+xml

HTML Older version Code<img src="path/to/image" alt="About image" /

>  <p>Image of Mars. </p>.HTML5

<figure><img src="path/to/image" alt="About image" /><figcaption><p>This is an image of something interesting.</p></figcaption>

</figure>

HTML Older Version Code.<link rel="stylesheet"

href="path/to/stylesheet.css" type="text/css" /><script type="text/javascript“

src="path/to/script.js"></script>HTML5

<link rel="stylesheet" href="path/to/stylesheet.css" />

<script src="path/to/script.js"></script>

HTML Older Version We need to add some client side script to

make the things happened.HTML5

<ul contenteditable="true"><li> Break mechanical cab driver.

</li><li> Drive to abandoned factory<li> Watch video of self </li>

</ul>

Color date  datetime  datetime-local  email  File with multiple file selection. month  number  range  Search Tel time  url week

HTML Older Version Code. <form action="" method="get">

<label for="email">Email:</label><input id="email" name="email" type=“text" /><button type="submit"> Submit Form </button> </form>

HTML5 <form action="" method="get">

<label for="email">Email:</label><input id="email" name="email" type="email" /><button type="submit"> Submit Form </button>

</form>

HTML Older VersionWe need to required some client side script to

validate the things.HTML5

<form method="post" action=""><label for="someInput"> Your Name: </label><input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required><button type="submit">Go</button></form>

HTML Older VersionWe need to add some client side script to make the

things happened.HTML5<form method="post" action="">

<label for="someInput"> Your Name: </label><input type="text" id="someInput" name="someInput" placeholder=“Enter your name" required><button type="submit">Go</button></form>

HTML5<audio autoplay="autoplay"

controls="controls"><source src="file.ogg" /><source src="file.mp3" /><a href="file.mp3">Download this

file.</a></audio>

<video controls preload><source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /><source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /><p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p></video>

<form action="" method="post"><label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required><button type="submit">Go </button></form>

<h3> Search Results </h3><p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

LocalStorage - stores data with no time limit<script type="text/javascript">

localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

SessionStorage - stores data with one time session<script type="text/javascript">

sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>

http://html5test.com/

www.developersnacks.com