The 7 Most Important HTML5 Features

HTML5 offers many improvements and new features that we can add to our Wapp arsenal.  And good news – most modern Web browsers do a bang up job of supporting the majority of the spec (with one notable Redmond exception — more on that in a future blog post).  But of all the features that HTML5 brings to the table, there are a few that stand out.  Here is a list of what I consider the “Super Seven”:

Audio & Video

Yes it’s been covered exactly two million times, well two million and one now, but its importance cannot be overstated.  HTML5 video tags basically allow us to break free of vendor lock-in (i.e., Adobe Flash).  However, as of right now, there is a big catch.  The browser vendors have not agreed upon a standard video format (surprise, surprise).  Ogg Theora is the closest they have come, but two giants, namely Apple and Microsoft, don’t support the standard in their Safari and Internet Explorer browsers.  H.264 and VP8 are the other two leading candidates, but neither has industry wide support.  Bummer.

Example code:

<video src="movie.webm" controls>
This is fallback text to display if the browser
does not support the video element.
</video>

2D Graphics

HTML5, with its Canvas tag and corresponding JavaScript API, brings 2D rendering to the masses.  With the combination, you basically define a drawable region in your Wapp using the Canvas tag, and then render 2D graphics in that region, using the tag’s ID and some magic JavaScript code.

Example HTML5 Canvas code:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Example of corresponding JavaScript code:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

Improved Forms

There is a lot to this one.  HTML5 forms add placeholders, autofocus, new input types (such as email, url, date, and search), and a required attribute to name a few.  These improvements make our Wapps more user friendly without having to rely on a lot of extra JavaScript code to accomplish it.

Example:

<form>
  <input type="email" autofocus>
  <input type="number" min="50" max="100" step="10" value="70">
  <input type="search" placeholder="This is a search field">
  <input type="submit" value="Search">
</form>

Offline Access

This is a killer feature that is really three different features in one.  First, through the use of a Cache Manifest (otherwise known as “Application Cache”), Wapp resources, such as files and images, are stored on the client so that the user gets a fully functioning application, even without a network connection.

Second, key-value pairs can be used to store application data, whether it be transactional, user preferences, or any other type of data.  This cookie-like mechanism is known as Web Storage.

Third, for data that really needs to be stored in a much more structured fashion, the Web SQL Database feature may be used.  This uses SQLite to store your application data in a relational database.  Be warned, however, that of the three offline features mentioned, this is the one that has the shoddiest browser support.

Example Manifest file:

CACHE MANIFEST
clock.html
clock.css
clock.js

Corresponding HTML tag attribute:

<html manifest="clock.manifest">

Web Workers

Web Workers are like threads for your Wapp.  This is exciting because it allows your applications to spawn background tasks for number crunching, data parsing, messaging, and the like.  You can even create shared workers with shared states – nifty!  Web Workers are coded using JavaScript.

Example HTML/JavaScript code:

<!DOCTYPE HTML>
<title>Shared workers: demo 1</title>
<pre id="log">Log:</pre>
<script>
  var worker = new SharedWorker('test.js');
  var log = document.getElementById('log');
  worker.port.onmessage = function(e)
  {
    log.textContent += '\n' + e.data;
  }
</script>

Corresponding shared worker code:

onconnect = function(e)
{
  var port = e.ports[0];
  port.postMessage('Hello World!');
}

WebSockets

WebSockets allow Wapps to partake in bi-directional communication with a partner, like “The Cloud”.  This, in turn, enables some well-known features such as instant messaging and data push without the need for polling or long-polling.

The WebSocket Interface:

[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket
{
  readonly attribute DOMString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
           attribute Function onopen;
           attribute Function onmessage;
           attribute Function onerror;
           attribute Function onclose;
  readonly attribute DOMString protocol;
  void send(in DOMString data);
  void close();
};
WebSocket implements EventTarget;

GeoLocation

If your Wapp is such that the user’s experience can be enhanced through the use of location awareness, then GeoLocation is where it’s at!  Get it?  It’s a play on words… ah, forget it.  Anyway, this part of the HTML5 spec allows you to use GPS, IP addresses, MAC addresses, and other mechanisms to determine the user’s location, either precisely or generally.  You can even cache the information for future use.

Example:

function showMap(position)
{
  // Show a map centered at (position.coords.latitude, position.coords.longitude).
}

// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap)

Lucky Seven

These seven features form the core of what I think is necessary to make Wapps a legitimate replacement for native apps. But I’m interested to hear what others think. So, have I omitted some really important piece of HTML5… something that you can’t live without?

This entry was posted in Technology and tagged , , . Bookmark the permalink.

One Response to The 7 Most Important HTML5 Features

  1. Jinto Jose says:

    Good article. Also, I think WebRTC is an important feature. Adding peer-to-peer connection abilities to your application opens lots of possibilities. I think, we can even hope for fully avoiding the web server to connect between two persons, in future.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>