The W3C states that: “HTML (Hypertext Markup Language) was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents.”
This actually means that HTML was not created to target the vague subject commonly referred to as Web Applications. The 5th major version of HTML (aka HTML5) introduces new features, ranging from CSS3 (related technology) to GeoLocation and WebStorage that mainly target Web Applications.

HTML5 is not one big thing but a collection of individual features. This actually means two things:

  1. HTML5 support can’t be detected and instead we must detect if the specific feature that we want to use is supported by the browser (feature detection).
  2. HTML5 specification is not closed. More and more features are being included in the W3C recommendation.

The image below gives a small idea of what might be added in the near future.

HTML5 taxonomy and status - top html5 features

But from all these cool, and perhaps cryptic, features, there are a couple that we should try to incorporate into our applications without hesitation. So, is HTML5 introducing new tags? Not entirely true. If you still think of HTML as only tags and angle brackets, you’re missing an important part.
For example, HTML5 doesn’t just define the <video> tag, but also the corresponding API. With this API, it’s possible to detect support for video format, stop, play, pause or even to know how much of the video has been downloaded. You might be thinking, “I build enterprise applications, so those features don’t really fit in!” Well, that couldn’t be further from the truth. In our fast-paced world, not being available in mobile is almost like not existing.
So, when adapting or creating web applications, we must consider that users might not be where we think they are (e.g. office desk). With this in mind, we can create better applications by adding features to the application that will further help the user performing the tasks.

What are the top HTML5 features you can't afford to miss?

1. GeoLocation

  This feature obtains the geographical position of a device. Imagine:

  • Showing information based on the user’s location.
  • Mapping the day’s route for your salespeople.
  • Giving delivery drivers specific directions based on their location (A):

Embeddable Google map powered by GeoLocation, one of the top html5 features

All of this is possible if the location of the user is known. However, because this information can compromise user privacy, the position is only available if the user approves it - this permission is requested at a domain level:

A dialog requesting your computer's location--powered by GeoLocation, one of the top html5 features

If the device being used doesn’t have GPS, the system will try to provide a location based on the IP address. This, as one might imagine, will decrease it’s accuracy. Now the techie stuff. To use this feature, the following method should be called:

navigator.geolocation.getCurrentPosition(success, error, options)

This method can receive three parameters:

I. success: This is a callback function that will be called as soon as the position is obtained. This parameter is mandatory.


function success(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
}

This callback function receives a JSON object containing the information obtained:

  • Timestamp
  • Speed
  • Heading
  • Altitude
  • Altitude Accuracy
  • Latitude
  • Longitude
  • Accuracy

II. error: This is a callback function that will be called if an error is received when obtaining the position.


function error(errorStruct) {
  var code = errorStruct.code;
  var msg = errorStruct.message;
}

If the user refused to shared their location, this method will be called stating.

III. options: This parameter receives a JSON object with the possible configurations that the API may receive:

  • enableHighAccuracy
  • timeout
  • maximumAge

To learn more about this API, please see the W3C specification.

2. Camera Access

HTML5 provides the ability to access the media devices presented on the mobile devices: camera (picture/video), microphone, etc. To use this feature it’s only required to add some attributes to the upload file tag:

<input type="file" accept="image/*; capture=camera">

In order to use this feature in the OutSystems Platform, just use the upload file widget and add the above tags to the extended properties:

OutSystems IDE enabling image capture from the camera, powered by one of the top html5 features: camera  

3. Canvas

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. This means that to do something like this:

Dynamically generated red square on gray background, drawn by one of the top html5 features: canvas

The following HTML tag is added first:

<canvas id='example' width='400' height='300'>

Then using JavaScript, elements can be drawn in it:


var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

But how could the Canvas element be helpful anyhow? Well, to allow the following sort of things:

John Smith's signature captured by one of the best html5 features: canvas

Yes, it’s possible using the canvas to collect the user's signature! (Tablet, Smartphone, etc.)

4. Web Storage

With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, web storage is more secure and faster. Persistent local storage is one area where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. Simply put, it’s a way for web pages to store named key/value pairs locally within the client web browser. Like cookies, this data persists even after a user navigates away from the web site, closes a browser tab, or exits a browser, etc. Unlike cookies, this data is never transmitted to the remote web server (unless sent manually). Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers, so it is available even when third-party browser plugins are not. This is one of those features that is still very volatile. Be sure to read the specs and then check if your target browsers support it. Read more at Dive Into HTML5: Local Storage.

5. App Cache

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection. As is well described in Dive Into HTML5:

“At its simplest, an offline web application is a list of URLs - HTML, CSS, JavaScript, images, or any other kind of resource. The home page of the offline web application points to this list, called a manifest file, which is just a text file located elsewhere on the web server. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When the time comes that you try to access the web application without a network connection, your web browser will automatically switch over to the local copies instead.”

This means the pages are stored statically in the browser (submit buttons won’t work) and forms will have to be handled manually using Web Storage, for example. In order to use this feature, one has to add a tag manifest to the HTML element:

<html manifest="example.appcache">

 ...

</html>

This means that the browser will understand that there is cache manifest file that needs to be downloaded. The browser now knows that the following page, plus others, might need to be cached. Then the cache manifest file contains several sections:

  • Cache: This section will indicate which files (images, css, JS, web pages) should be stored locally.
  • Network: This section indicates the resources that require the user to be online.
  • Fallback: This section indicates which resources should be served to the user if trying to access them while offline.

So, typically the cache manifest looks as follows:


CACHE MANIFEST
#123fe21
# Explicitly cached 'master entries.'
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
*
# serve static.html if main.py is inaccessible
# serve offline.jpg in place of all images in images/large
# serve offline.html in place of all .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

If rel="noopener noreferrer" using the web storage feature or the cache manifest, first try looking into the HTML5 Offline OutSystems Forge component, which will help achieve both. Finally, remember that HTML5 is here to stay. Here is what the W3C had to say about the future of web standards in July 2009:

“Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.”

Although we (developers) would love to trash all of the old browsers, unfortunately, we can’t. So, if you want to know that a specific feature can be used in a specific browser look at these sites: Can I Use or HTML5 Please. Are there any top HTML5 features I overlooked? Share your favorites in the comments.