HTML5 How You Might Not Know It

You probably know that HTML is a standard markup language for creating websites. The so-called hypertext links allow individual pages to be connected between each other and the use of marks allows to assign special meaning to individual parts of the content. But can you remember why HyperText Markup Language was created? Since that time, it has undergone major changes and today, it can do things that we could hardly imagine at its beginnings. Dive into its history with us and get to know the less known but all the more interesting functionalities of the version HTML5.

The beginning of HTML goes back to the year 1990 when Tim Berners-Lee realized that in order to create simple documents, Tex or PostScript might not be the most suitable languages. However, the idea of the new markup language comes already from the previous year. Originally, the language was designed for internal use in the European organization for nuclear research, known also as CERN. But officially it was not used as such. The first description of the new markup language was published at the end of the year 1991 and it included only 18 tags.

Can you guess which? Try to write them down. You can find the answer here.

Over time and thanks to the evolution of the technology, the version HTML4 was introduced in the year 1997 which was revised in the following years. With the gradual increase of the number of new users on the internet, there was increasing pressure to improve the overal impression and working with websites. You guessed right - this is the time when HTML5 comes to the scene. In the year 2008, a working version was published and the official specification did not come until the year 2014.

Main advantages of HTML5 are:

1. New tags for improvement of semantics (aside, section, address, figure, main, MathML, progres, ...)
2. Offline access + persistent storage (LocalStorage, IndexedDB)
3. Styling (box-shadow, multiple backgrounds, filters, @font-face, flexbox, ...)
4. Multimedia (audio, video, track, WebRTC, Camera API)

You probably know and use most of these. Let’s dive in together into the less known ones.

Page Visibility API

You can put a slider (carousel) on your page which switches slides each 5 seconds. But what if the user minimizes the window or goes to a different tab? Slider continues on. And your client invested a considerable amount of time and money into deciding the most efficient order of the individual slides. The story that they wanted to tell through the slider is falling apart and starts to be incomprehensible. Thanks to the Page Visibility API, you can follow these changes. This functionality enables monitoring of which element is displayed to the user and modifying the behaviour accordingly.

// Set the name of the hidden property and the change event for visibility  
var hidden, visibilityChange;   
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support   
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
}  
   
var videoElement = document.getElementById("videoElement");  
  
// If the page is hidden, pause the video;  
// if the page is shown, play the video  
function handleVisibilityChange() {  
  if (document[hidden]) {  
    videoElement.pause();  
  } else {  
    videoElement.play();  
  }  
}  
  
// Warn if the browser doesn't support addEventListener or the Page Visibility API  
if (typeof document.addEventListener === "undefined" || hidden === undefined) {  
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");  
} else {  
  // Handle page visibility change     
  document.addEventListener(visibilityChange, handleVisibilityChange, false);  
      
  // When the video pauses, set the title.  
  // This shows the paused  
  videoElement.addEventListener("pause", function(){  
    document.title = 'Paused';  
  }, false);  
      
  // When the video plays, set the title.  
  videoElement.addEventListener("play", function(){  
    document.title = 'Playing';   
  }, false);  
  
}  
  
// Source: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Navigator API – Online/Offline

Even in the year 2020, we are sometimes struggling with connection issues. In case the user of your application wants to transfer to a link and the app is not reacting, they will most likely blame you for the issue and only later find out that the issue is on their side.

The Navigator API helps solve this issue. It will not tell us whether the user is connected to the internet. We will only find out that they are connected to some kind of network. We cannot rely on the response being true meaning that the user is connected to the internet. But if the response status is false, we can be 100 % sure that the user is not connected.

The implementation is similar to the previous case:

window.addEventListener('offline', function(e) {  
    console.log('You are probably offline :(');  
});  
window.addEventListener('online', function(e) {  
    console.log('Welcome back online!');  
});

An attentive reader will have noticed that there are more possibilities how to solve this issue (for example using an AJAX call at our end point or using a service with high availability). But is there some 100 % reliable and clean solution?

Yes, but actually no. Navigator.connection is a global attribute that returns the object NetworkInformation which includes detailed information about connection (bandwidth, RTT, type of connection). The problem is that it is an experimental API that is only partially supported (more for those interested in the official draft).

Vibration API

The fact that people learn faster through negative feedback than the positive one is fairly obvious. Vibration API helps to capitalize it in the world of web app. When a form is filled out wrong, we can add one more element to the red form: vibration. We improve the UX as well as accessibility of the application which is a topic of its own.

const pattern = [  
    100, // vibrate for 100ms  
    50, // then wait 50ms  
    200, // then vibrate for 200ms  
];  
  
window.navigator.vibrate(pattern); // run

In case that you are a fan of vibration, I recommend playing a couple jingles created through the Vibration API - HTML5 Vibration API - Stretches Of Songs. You can try out the direct application of Vibration API in our open source project WTFisAckee. Even though based on my opinion this is a great API, you can only expect support on Android devices.

Credential Management API

Writing the name and password over and over again is tiresome. Thanks to Credential Management API, you do not need to bother with it. CM API ensures automatic sign-on, or it lets a pop-up display with the account selection where you can pick the account to log in with. All you need to do is give the browser permission to save login details upon registration. An advantage of this API is that the browser does not have to “guess” which one of the fields (login, password) is the right one.

Credential Management API can be used for OAuth authentication (Google, Facebook…), as well as classical authentication via name and password. At the moment, Credential Management API is an experimental technology and can be used in browsers Microsoft Edge, Opera and Google Chrome.

Bluetooth API

The Bluetooth Low Energy (BLE) has been with us for a long time and everybody is familiar with it. The BLE chip is small and cheap and it has low energy consumption. That is one of the reasons why it is almost on any device.

Bluetooth API is a low-level API that can allow communication with nearby devices with active Bluetooth Low Level Energy profile. It is using the same frequency for data transfer, but it uses different transfer channels, has lower consumption and transfer speed. There are more differences, but an attentive reader will find them on Wikipedia. :)

For a collection of functional examples of how and what the Bluetooth API can be used for, see Web Bluetooth Samples.

Ambient Light API

Mobile devices and applications (web as well as native) are often used on the move and when traveling. It can easily happen that under specific light conditions, the user interface might not be well visible or it can be overlit. Among the programmers, the typical example is the Google homepage at one o’clock in the morning (apologies to those who do not need to Google or are asleep at this hour). Ambient Light API and few lines of codes will tell us what the light conditions are around the user’s device. The unit used is lux.

window.addEventListener('devicelight', function(event) {  
    // 10 ~ 50 lux : Dim Environment  
    // 100 ~ 1000 lux : Normal  
    // > 10000 lux : Bright  
    if (event.value < 50) {  
        console.log('Switching to light mode...');  
    } else {  
        console.log('Switching to dark mode...');  
    }  
});

Also in this case, it is an experimental technology which is only supported in Mozilla Firefox and Microsoft Edge.

Gamepad API

Maybe the name has startled you, but this is what it is. If you develop web games (do not be startled - here are a lot of different APIs for game development), Gamepad API can bring full support of different game controls which you can use for example for instructing your character. You can find detailed description and implementation here.

And the good news is that it is supported everywhere except Internet Explorer (and nobody is surprised there :P).

Conclusion

In this article, we took a look back into the history of HTML and remembered all that HTML5 brings. I feel the need to point out that even though it might not seem at first glance, HTML5 is a revolution in the field of websites and going through it in detail would probably take another (long) look. Even though the support of above mentioned APIs is not 100% and sometimes they are only experimental, we can still use them, because these are mostly complimentary features and the functionality of our application should not be dependent on them.

Are you using one of the above mentioned APIs in some of your projects? Let us know which one is your favorite!