HTML Back Button

How to Build a Web Page
How to Build a Web Page

One of the most common features that many web designers like to add to their web pages is a "go to previous" button or link, also known as an HTML back button, that sends the user to the last web page they visited.

How the HTML Back Button Helps Navigation

One of the most important aspects of any web page is creating seamless and intuitive navigation for your visitors. When you have "internal" pages that are linked from several other pages, it can be somewhat difficult to guess where the visitor came from. In the case where visitors arrived at the page from a search engine or other link, it's impossible to know. However, by using an HTML back button, you can provide your visitors with the convenience of a link that returns them to the page where they came from. While users do normally have the option to use the browser "back" button, which would do the same thing, providing a link on your page adds convenience and intuitiveness to your website.

Programming a Back Button with HTML

There are various methods available to create a button or link that will send your visitor to the previous page they were at. The option you choose depends on how you would like the link to appear, and whether you want to provide for the fact that some users may not have javascript-enabled browsers.

Using Javascript

Using the javascript method is one of the most popular techniques many newer web designers use because it is so easy. However, if you use this approach, it's a good idea to include an actual linked page for the browser to go to in case the browser can't run javascript. In such a case, the browser will ignore the javascript code, but it will return to the link that you've defined to the href variable. When choosing what page to link to, try to guess where the user would have come from on your site before arriving at this page. If you're not sure, then you could always send them to the main page of your website.

Javascript: A Text Link

This first javascript technique provides the user with a text link that will send them back one page.

<a href="yourpage.html" onclick="window.back()">Return to Previous Page</a>

You can use "history.back()" instead of "window.back()" - the two functions work the same way. Another technique using javascript is to send the user back a number of pages. Most web programmers send the visitor back "-1" pages, but you could set the number of pages to whatever you like.

<a href="yourpage.html" onclick="history.go(-1);">Return to Previous Page</a>

Javascript: A Form Button

Another method utilizing javascript is to create a grey "form button" which, when clicked, will behave in the same way as the link method described in the last section. There is no real advantage in using this technique over the text link approach. The deciding factor is really aesthetics - which option do you want to provide your visitors for navigation, and how do you want it to look?

<FORM><INPUT TYPE="button" VALUE="Previous Page" onClick="history.go(-1);"> </FORM>

Using Server Side Scripts

The technique most professional web designers use is to make use of Server Side Includes (SSIs), where they can write CGI code that gets processed on the web server itself, removing the need for the client browser to run any javascript code. How this code is written depends on how the web server is configured and what scripting language you use. In all cases, the server side script makes use of a variable called "HTTP_REFERER."

Sample script using CGI:

<A HREF="<!--#echo var="HTTP_REFERER"-->">Go to Previous Page</A>

The HTTP_REFERER variable is the URL that referred the visitor to the current web page. If your scripting language of choice is PHP, then to access the referer variable and link to the previous page, you would create a text link using the following code.

<?php echo '<a href="' . $_SERVER["REFERER"] . '">Go to Previous Page</a>'; ?>

Or a form button using this code:

<?php echo '<form action="' . $_SERVER["REFERER"] . '" method="get"> <input type="submit" value="Previous Page"> </form>'; ?>

Final Words

Adding the feature to "go back" to previous pages seems like a very simple concept, but when you're trying to incorporate the simplest and most intuitive navigation into your website, these methods of adding such a feature become an indispensable part of any web programmer's toolbox.

Was this page useful?
Related & Popular
HTML Back Button