How do I make my back button link to the previous page the user has been on?

I'm making a wedding website, basically the site is one big nav optimised for touch and there are 3 main sections: The Wedding, Travel and The Town. Each section then has sub-sections inside it, The Wedding has The Ceremony and Reception, Travel has Flights, Transfers and Accommodation and The Town has About Malcesine, Things To Do and Weather.

Now, on all of those pages is also a link to the RSVP page and there are also home & back buttons. On the RSVP page I need the back button to go back to whatever page the user was on but I can't figure out how to get it to link to more than one page? I've looked here and on Google but can't find anything

Here's my code for the header section of the RSVP page which involves the home & back buttons:

<header class="mainHeader">
<h1>RSVP</h1>
  <nav class="secondaryNav">
    <a href="town.htm"><img class="backButton" src="img/back2.png" alt="Back Button"></a>
    <a href="home.htm"><img class="homeButton" src="img/home.png" alt="Home Button"></a>
  </nav>
  <aside><p id="countdown"></p></aside>
</header>
<!-- end .mainHeader -->

The back button is currently linking to just the Town sub-section. The countdown paragraph is a countdown timer. Am I right in thinking i'll need to use some form of javascript?

Solution

history.go(-1); does it, so I guess the easiest implementation would be inline:

<img class="backButton" src="img/back2.png" alt="Back Button" onclick="history.go(-1);" />

Though you'd probably want to remove that anchor, or at least its href attribute.

There's a way to do this in href, but it's not the best approch:

<a href="javascript: history.go(-1);">...</a>