- How to create an HTML back button
- Using history.back
- Using history.go
- Related information
- How to Get the Previous Page URL in JavaScript
- Limitations of document.referrer
- Navigating to the Previous Page
- Every Crazy Thing JavaScript Does
- How to Get the URL of the Last Visited Page in JavaScript
- Limitations of document.referrer
- Navigating to the Last Page
- 11 Amazing New JavaScript Features in ES13
- HTML Links
- HTML Links — Hyperlinks
- HTML Links — Syntax
- Example
- HTML Links — The target Attribute
- Example
- Absolute URLs vs. Relative URLs
- Example
- Absolute URLs
- Relative URLs
- HTML Links — Use an Image as a Link
- Example
- Link to an Email Address
- Example
- Button as a Link
- Example
- Link Titles
How to create an HTML back button
You can add a back button to your web page. When a visitor to your page clicks the button, they’re taken to the last page they visited, as if they clicked the back button in their browser.
You can accomplish this by editing the HTML (hypertext markup language) of your page, and adding a little JavaScript.
These buttons don’t work if the user has no browsing history. For example, if the user opens your page in a new browser tab or window, nothing happens when they click the button.
Using history.back
In a web browser, the built-in JavaScript object window has an object called history containing the URLs a user has visited in their current browser window. You can use the history.back() method to tell the browser to go back to the user’s previous page.
One way to use this JavaScript is to add it to the onclick event attribute of a button. Here, we create the button using a element, containing an element of the button type.
Insert the following HTML into your web page:
The result looks like the button below. If you click it, you go back to the previous page in your history.
Using history.go
The history.go() method tells the browser to go to a specific page in the user’s browsing history. You can specify which history item by putting a number inside the parentheses. With computer programming, this is called an argument.
If you specify the number -1 as your argument, the browser goes back one page in the browser’s history. Here’s the same code as above, using history.go(-1) instead of history.back().
Related information
- How to create an HTML push-button link.
- See our back and push-button definitions for further information and related links.
- See our and HTML element definitions for more examples of them in use.
- HTML and web design help and support.
How to Get the Previous Page URL in JavaScript
We can get the previous page URL in JavaScript with the document.referrer property.
const previousPageUrl = document.referrer; console.log(`Previously visited page URL: $`); document.referrer is a readonly property that returns the URL of the page used to navigate to the current page.
Here’s a more practical example:
Link get-last-page.html
You visited this page from: get-last-page.js
const previousPage = document.getElementById('previous-page'); previousPage.textContent = document.referrer; Limitations of document.referrer
The document.referrer property doesn’t always work though. It typically gives the correct value in cases where the user clicked a link on the previous page to navigate to the current page.
But if the user visited the URL directly by typing into the address bar or using a bookmark, document.referrer will have no value.
document.referrer also won’t have a value if the clicked link was marked with the rel=»noreferrer» attribute. Setting rel to noreferrer specifically prevents referral information from being passed to the webpage being linked to.
Link Link (noreferrer) Navigating to the Previous Page
Perhaps you would like to get the previous page URL so that you can navigate to that page. You can do this easily with the history.back() method.
get-last-page.js
. const backButton = document.getElementById('back'); backButton.onclick = () => < history.back(); >;get-last-page.html
You visited this page from:
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
How to Get the URL of the Last Visited Page in JavaScript
We can get the last page URL in JavaScript with the document.referrer property.
const lastPageUrl = document.referrer; console.log(`Last visited page URL: $`); document.referrer is a readonly property that returns the URL of the page used to navigate to the current page.
Here’s a more practical example:
Link get-last-page.html
You visited this page from: get-last-page.js
const lastPage = document.getElementById('last-page'); lastPage.textContent = document.referrer; Limitations of document.referrer
The document.referrer property doesn’t always work though. It typically gives the correct value in cases where the user clicks a link on the last page to navigate to the current page.
But if the user visited the URL directly by typing into the address bar or using a bookmark, document.referrer will have no value.
document.referrer also won’t have a value if the clicked link was marked with the rel=»noreferrer» attribute. Setting rel to noreferrer specifically prevents referral information from being passed to the webpage being linked to.
Link Link (noreferrer) Navigating to the Last Page
Perhaps you would like to get the last page URL so that you can navigate to that page. You can do this easily with the history.back() method.
get-last-page.js
. const backButton = document.getElementById('back'); backButton.onclick = () => < history.back(); >;get-last-page.html
You visited this page from:
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links — Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links — Syntax
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links — The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _self — Default. Opens the document in the same window/tab as it was clicked
- _blank — Opens the document in a new window or tab
- _parent — Opens the document in the parent frame
- _top — Opens the document in the full body of the window
Example
Use target=»_blank» to open the linked document in a new browser window or tab:
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):
Example
Absolute URLs
W3C
Relative URLs
HTML Images
CSS Tutorial
HTML Links — Use an Image as a Link
To use an image as a link, just put the tag inside the tag:
Example
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
Example
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
Tip: Learn more about JavaScript in our JavaScript Tutorial.
Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.