The Intersection

Technology. Career. Entrepreneurship. Life. by Ei Sabai Nyo

05 Sep, 2012

My favourite HTML5 Features    

1. Geolocation
2. onLine
3. Audio and Video
4. Local Storage
5. History


Geolocation API is usually used together with Google Maps to show the current location of the device.

Where would you use it?
Geolocation is an essential feature for applications that needs to know information about the device’s current location such as Store Locator, Cinema Finder and Get Directions.


if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successcalllback, errorcallback);
} else {
  errorcallback('This feature is not supported on your device.');

function successcalllback(position) {

function errorcallback(message) {


This HTML5 feature checks the status of Internet connection for the current device.

Where would you use it?
It is a good practice to check if a device has an Internet connection before making an AJAX request to a web service.


var isonline = (navigator.onLine) ? true : false;

Audio and Video

<audio> and <video> are HTML5 elements that enable audios and videos to be displayed on web pages without using a third-party plugin like flash.

Where would you use it?
When you are developing a website or a web app for smartphones, you will want to use audio and video elements to embed media as it will enable those media to be played using the device’s default players, resulting in a better performance and user-experience.


<audio controls="controls" autoplay="autoplay">
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mp3" />
  This feature is not supported on your device.

<video width="300" height="200" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  This feature is not supported on your device.

Local Storage

Local Storage acts like a client-side database which your application can use to store information. Unlike cookies, there is a lot of storage space available (5MB) and it is relatively easy to store information into and retrieve information from Local Storage.

Where would you use it?
As the name suggests, Local Storage resides on the user’s local browser and is useful if you wish to remember user’s perferences and usage history.


if(typeof(Storage)!== "undefined")  {
     localStorage.setItem("name", "John Smith");   //save
     console.log(localStorage.getItem("name"));  //retrieve
     localStorage.removeItem("name"); //delete
} else {
     console.warn('This feature is not supported on your device.');


History API enables deep linking of ajax-powered pages without having to manipulate the current page’s URL.

Where would you use it?
If you have a page where content changes on user’s action without a page refresh, then History API can be used to manipulate browser history so user can move backward and forward between actions.


var pages = [
            "content": "Contentforpageone",
            "photo": "image1.jpg"
            "content": "Contentforpagetwo",
            "photo": "image2.jpg"
            "content": "Contentforpagethree",
            "photo": "image3.jpg"

function update(data) {

$(function() {
    $('.next, .prev').live('click', function(e) {
        var pageno ='href').split('/').pop(),
        data = pages[pageno] || null; 
        // add to history


    window.addEventListener('popstate', function(e) {

	  content: pages[0].content,
	  photo:  pages[0].photo
	}, document.title, document.location.href);


    <li><a href="/0" class="prev">Previous</a></li>
    <li class="current">1</li>
    <li><a href="/2" class="next">Next</a></li>
<div id="content"></div>
<img src="noimage.jpg" alt="" id="image" />
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

One response to “My favourite HTML5 Features”

  1. Gulliver says:

    Awesome information. I am really surprised with this topic. Keep up the good work and post more here to read.

Profile PicHello! Welcome to my blog! My name is Ei Sabai and on this blog, I write about technology, career, entrepreneurship and life. I started this blog in 2005 and for a decade, the main focus of this blog was web development. I am rebranding my blog in 2016 so here is to bigger and better things (although I will always be a technologist at heart)! Read more about me or have a look at some of the tips & resources for web professionals.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book