In very simple terms, HTML5 is a combination of existing markup, new markup additions and JavaScript APIs. The JavaScript APIs form the bulk of what is new in HTML5. One of the reasons why HTML5 is gaining so much attention is because it has inherent support for rich media such as audio and video. So, we don't have to install other plugins to achieve this result.
I will just publish here the code for some sample tags, new markups that I wrote and in the end there is an image of the webpage running in chrome. One good thing about HTML5 is that it is very simple to learn almost to the extent of being self-explanatory.
Keep in mind that some of the stuff might not work on your machine depending upon the browser you are using. Also, as you can see, I am using scripts from http://www.modernizr.com/ to detect HTML5 capabilities on my browser.
<!DOCTYPE HTML> <html> <head> <title>HTML5 Examples</title> <script src="Scripts/modernizr-1.7.min.js" type="text/javascript"></script> <script type="text/javascript"> function init() { var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.beginPath(); cxt.arc(70, 18, 15, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); } if (localStorage.pagecount) { localStorage.pagecount = Number(localStorage.pagecount) + 1; } else { localStorage.pagecount = 1; } document.writeln("<h2>Local Storage Example</h2>"); document.writeln("<h4>Stored forever</h4>"); document.writeln("Visits: " + localStorage.pagecount + " time(s)."); document.writeln("<hr color=orange />"); if (sessionStorage.pagecount) { sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1; } else { sessionStorage.pagecount = 1; } document.writeln("<h2>Session Storage Example</h2>"); document.writeln("<h4>Stored for the session - as long as the browser is open</h4>"); document.writeln("Visits: " + sessionStorage.pagecount + " time(s)."); document.writeln("<hr color=orange />"); document.writeln("<h2>Modernizr Example</h2>"); document.writeln("Audio capability: " + Modernizr.audio + "<br/>"); document.writeln("Video capability: " + Modernizr.video + "<br/>"); document.writeln("Web SQL DB capability: " + Modernizr.websqldatabase + "<br/>"); document.writeln("<hr color=orange />"); </script> </head> <body onload="init()"> <div> <header> <a href="http://www.google.com"> <hgroup> <h2>Header Example</h2> <h3>grouped insided hgroup which is wrapped inside an a element to provide hyperlink</h3> </hgroup> </a> <hr color="orange" /> </header> <nav> <h2>Nav Example</h2> <ul> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.cnn.com">CNN</a></li> <li><a href="http://www.cnn.com">CNN</a></li> </ul> <hr color="orange" /> </nav> <section> <h2>Canvas Example</h2> <canvas id="myCanvas" width="200" height="100" style="border: 1px">Your browser does not support canvas.</canvas> <hr color="orange" /> </section> <section> <h2>Video Example</h2> <video src="Videos\movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video> <hr color="orange" /> </section> <section> <h2>Audio Example</h2> <audio src="Audios\HudHud.mp3" controls="controls">Your browser does not support the video tag.</audio> <hr color="orange" /> </section> <section> <aside style="font-size:larger;font-style:italic;color:red;float:right;width:300px;border:2px solid black"> Aside example: This text is on the side because it is inside the aside tag. </aside> <h2>Mark Example</h2> <mark>This text is highlighted because it is inside the mark tag.</mark> <hr color="orange" /> </section> <details> <h2>Details - Summary Example (Currently not implemented in chrome)</h2> <summary>This is summary</summary> <div>Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: Lots of details here: </div> <hr color="orange" /> </details> <section> <h2>datalist Example</h2> <label>Who's greatest <input type="text" name="favCharacter" list="players"> <datalist id="players"> <option value="Sachin Tendulkar"> <option value="Roger Federer"> <option value="Diego Maradona"> </datalist> </label> <hr color="orange" /> </section> <section> <h2>Input types examples</h2> <input type="search" id="search" name="search" autofocus/><br/> <input type="url" id="urlinput" name="urlinput" placeholder="Choose URL" /><br/> <input type="tel" id="tel" name="telinput" placeholder="Choose telephone number" /><br/> <input type="color" id="color1" name="colorinput" placeholder="Choose color" /><br/> <input type="number" id="num1" name="numinput" placeholder="Choose number" /><br/> <input type="date" id="date1" name="dateinput" placeholder="Choose date" /><br/> <hr color="orange" /> </section> <section> <h2>Time Example</h2> <time datetime="2011-05-26T16:48:43" pubdate>May 26, 2011</time> <hr color="orange" /> </section> <footer> <h2>© Footer example</h2> <hr color="orange" /> </footer> </div> </body> </html>