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, we will go over the basic features of HTML5.

Semantic tags

Semantic tags like article, section etc are more meaningful than plain div tags.

<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>

Input types

HTML5 introduces new input types – email, telephone, date, number. For example, email allows user to enter only valid email addresses. Date input shows a calendar to pick dates. Number input allows only integers or decimals.

<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"/>

Canvas

Draw shapes within a canvas tag using JavaScript. Get a context. Use the context to draw shapes and strings.

<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);
}

SVG

Canvas allow bitmap operations. HTML5 SVG supports vector graphics. 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>

CSS3

Define styles using CSS3. For eg, render a rounded border as follows.

div
{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

CSS3 has rich 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; 
}

Geolocation

Geolocation gets the location of the device. The following script gets the latitude and longitude of the current position.

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);
}

Multi-media

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>

Other features

LocalStorage, IndexedDB, WebWorkers, and WebSockets are other interesting features in HTML5. Local storage provides more storage within the browser session. 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.

Related Posts

Leave a Reply

Your email address will not be published.