How to Add a Refresh Page Button or Reload Link (HTML & JavaScript)

Want to add a refresh page button or reload link to your web page? A reload button is handy for live blogs, scores, dashboards, web apps and pages that show changing data, so visitors can update the page with one click instead of hunting for the browser’s refresh icon, which is hidden on many mobile browsers. Here’s the HTML and JavaScript code for a refresh page button, a reload link and auto refresh in 2026, with modern best practices.

Quick answer: Add <button type="button" onclick="location.reload()">Refresh page</button> to your HTML. Clicking it reloads the current page using JavaScript’s location.reload() method.

1. Refresh page button (HTML and JavaScript)

The simplest and most accessible option is a real <button> element:

<button type="button" class="reload-btn" onclick="location.reload()">
  Refresh page
</button>

Buttons work with the keyboard and screen readers, and you can style them with CSS. If you use a CSS framework like Bootstrap, just add class="btn btn-primary".

2. Reload page link

If you prefer a text link, point it at the current page and reload with JavaScript:

<a href="" onclick="location.reload(); return false;">Reload page</a>

An empty href="" links to the current page, so it still works if JavaScript is disabled. Older tutorials use href="javascript:location.reload();", which works but is discouraged today because it breaks with strict Content Security Policies.

3. Refresh button without inline JavaScript

For cleaner code, keep the script separate and attach it with an event listener:

<button type="button" id="refresh">Refresh page</button>

<script>
  document.getElementById("refresh")
    .addEventListener("click", () => location.reload());
</script>

This approach works with Content Security Policy, is easy to reuse, and keeps your HTML tidy. See the MDN location.reload() reference for browser details.

4. Auto refresh a page

To refresh a page automatically, add a meta refresh tag to the <head>. This example reloads every 60 seconds:

<meta http-equiv="refresh" content="60">

Or with JavaScript:

<script>
  setTimeout(() => location.reload(), 60000);
</script>

Use auto refresh with care. It can lose what a visitor is reading or typing, inflates pageview statistics, and hurts accessibility, as WCAG guidelines recommend letting users control time limits. For live data, it’s usually better to update just part of the page with fetch() instead of reloading everything.

5. Hard refresh: bypass the cache

JavaScript can’t force a cache-free reload in most browsers, as the old location.reload(true) option only ever worked in Firefox and is now ignored. To get the latest version of a page yourself, use a hard refresh:

• Windows and Linux: Ctrl + F5 or Ctrl + Shift + R
• Mac: Cmd + Shift + R
• Normal refresh: F5 or Ctrl + R (Cmd + R on Mac)

If visitors keep seeing old content after an update, clear your caching plugin or CDN cache rather than adding refresh buttons.

Adding a refresh button in WordPress

WordPress may strip onclick and <script> from post content for users without the unfiltered HTML permission. Add the button in a Custom HTML block as an administrator, or add the event-listener script to your theme’s footer with a code snippets plugin.

Frequently asked questions

How do I refresh a page in JavaScript?

Call location.reload(). It reloads the current URL, just like the browser’s refresh button.

Is meta refresh bad for SEO?

A meta refresh that reloads the same page doesn’t directly hurt rankings, but it can annoy users. Don’t use a delayed meta refresh to redirect to a different URL; use a 301 redirect instead.

How do I refresh only part of a page?

Use JavaScript’s fetch() to load new data and update just that section of the page, without a full reload.