How to make an HTML back link?

What is the simplest way to create an <a> tag that links to the previous web page? Basically a simulated back button, but an actual hyperlink. Client-side technologies only, please.

Edit
Looking for solutions that have the benefit of showing the URL of the page you're about to click on when hovering, like a normal, static hyperlink. I'd rather not have the user looking at history.go(-1) when hovering on a hyperlink. Best I've found so far is:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

Is document.referrer reliable? Cross-browser safe? I'll be happy to accept a better answer.


Solution 1:

And another way:

<a href="javascript:history.back()">Go Back</a>

Solution 2:

This solution has the benefit of showing the URL of the linked-to page on hover, as most browsers do by default, instead of history.go(-1) or similar:

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

Solution 3:

This solution gives you the best of both worlds

  • Users get to hover over the link to see the URL
  • Users don't end up with a corrupted back-stack

More details in the code comments below.

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() {
  history.back();
  return false;
}
<a id="back-link">back</a>