HTML5 is an evolving web standard. It has good adoption across browsers - IE (10), Firefox, Chrome, Safari, Opera. To see the level of compliance in your browser, visit http://html5test.com. In this post, I will quickly illustrate the basic features of HTML5.
HTML5 introduces new semantic tags like article, section etc which help define the HTML document more logically. An example of HTML5 document is shown below:
<article>
<hgroup>
<h1>Title of the page</h1>
<h2>Subtitle</h2>
</hgroup>
<section>
<h1>Virgin Gorda</h1>
<p>The Baths at Virgin Gorda are truly one of the most picturesque places in the Caribbean.<p>
</section>
</article>
HTML5 introduces new input tags - email, telephone, date, number. Email allows only valid email addresses to be entered. Telephone accepts a pattern and allows only text following that pattern. Date shows a calendar when clicked on the textbox. Number allows only integers to be entered within a defined range.
<input type="email" name="email" required placeholder="Enter your email:"/>
<input type="tel" name="tel" required placeholder="Enter telephone" pattern="\([\d]{3}\) [\d]{3}-[\d]{4}"/>
<input type="date" name="bday" required placeholder="Enter birthday"/>
<input type="number" name="age" min="5" max="15" required placeholder="Enter age"/>
HTML5 has a canvas tag. Within the canvas tag, a graphics context can be obtained which can be used to draw shapes and strings. The following script draws a rectangle within the canvas:
<canvas id="mycanvas" height="250" width="250" style="border: 2px solid #f00"></canvas>
function draw2 () {
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 50, 50);
}
HTML5 supports vector graphics using SVG (as opposed to bitmap operations in canvas). The following markup draws a rectangle, circle and some text using SVG.
<svg width="300" height="300" style="border: 2px solid red;">
<text style="font-size: 30; stroke: blue;" x="10" y="170">
Hello SVG World
</text>
<rect x="5" y="50" width="150" height="30" style="fill: yellow;" />
<circle cx="20" cy="50" r="20" style="fill:red;" />
</svg>
HTML5 has rich support for styles using CSS 3. For eg, a rounded border can be rendered using the following styles - webkit- for Safari, Chrome, -moz- for Firefox, -o- for Opera, -ms- for IE:
div
{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
HTML5 supports CSS animations. The following style animates the height for a duration of 5 seconds:
div#formPanel > p:hover
{
height: 50px;
-webkit-transition-property: height;
-webkit-transition-duration: 5s;
-webkit-transition-timing-function: ease;
}
Geo-location is another HTML5 standard supported within the browsers. The following script gets the latitude and longitude of the current position and shows it on Virtual Earth:
if (window.navigator != null) {
var geo = window.navigator.geolocation;
watchID = geo.watchPosition(successCb, failureCb);
}
function successCb(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showMap(lat, lon);
}
HTML5 has good multi-media support. The audio and video tags in HTML5 embed audio and video respectively:
<video src="@Url.Content("~/Content/Wildlife.wmv")" width="400"
height="300" style="border: 2px solid #f00" controls preload="false">
<audio src="@Url.Content("~/Content/Maid.mp3")" width="400"
height="300" style="border: 2px solid #f00" controls>
LocalStorage, IndexedDB, WebWorkers, and WebSockets are other interesting features in HTML5. Local storage provides more storage within the browser - much more than what is available with cookies. IndexedDB allows a database to embedded locally. WebWorkers allows browsers to run long processes without affecting the UI. WebSockets allow bi-directional socket communication with the server, the most popular being chat and gaming applications.
