Back to search results

Don't Break the Back Button: The HTML5 History API




Dave Hollingworth





Using modern techniques such as Ajax to update the content of web pages is a great way to make responsive, more efficient websites and applications.

However, doing so can cause a problem.

The back button is by far the most used navigational element in the browser. It gives people browsing the web, especially newcomers, confidence to click on links as they know they can go back to where they were. They expect it to always work.

By updating part of a web page using client-side script, the behaviour of this button is broken. This has the potential to frustrate visitors to the website.

The recent introduction of the HTML5 History API allows us to fix this - we can do partial page updates and tell the browser that the content has changed, thereby keeping the back button in full working order.

In this course you'll learn how page navigation and the browser history work, how we can break the back button by doing partial page updates, and how to fix it again using the HTML5 History API. We'll also learn how to overcome inconsistencies in the API by using the History.js JavaScript library, and also how this provides support for the history API in older, HTML4 browsers.

Throughout the course we'll be building a sample website that demonstrates all the techniques discussed in the lectures. Complete, working, fully-annotated source code is available for download after each lecture where we create a new version of the site.