HTML Auto Refresh: How to Refresh a Page Automatically With Meta Refresh and JavaScript

For HTML auto refresh, add <meta http-equiv="refresh" content="30"> inside the page's <head>. The number is the delay in seconds, so this tag reloads the page every 30 seconds. Use JavaScript instead when you need more control, such as updating only part of the page. If you can't edit the page, use an auto refresh extension.

How Do You Auto Refresh an HTML Page?

Put a meta refresh tag in the <head>. No JavaScript is needed:

<head>
  <meta http-equiv="refresh" content="30">
  <title>Live scores</title>
</head>

According to MDN's meta http-equiv reference, the timer starts when the page has completely loaded. Because the tag is part of the page, it loads again with every reload, so the refresh repeats until someone closes the page. Set content to the number of seconds you want:

How to Redirect After a Few Seconds

Add ;url= and the address. This tag sends visitors to the new page after 5 seconds:

<meta http-equiv="refresh" content="5;url=https://example.com/new-page">

Google treats the two delays differently. According to Google Search Central, it "interprets instant meta refresh redirects as permanent redirects" (content="0;url=…") and delayed ones as temporary. If a page has moved for good, a server-side 301 redirect is still the first choice. Use meta refresh when you can't change the server.

How to Auto Refresh With JavaScript

Use JavaScript when the refresh should depend on something. This version reloads every 30 seconds, but only while the tab is visible, so a page left in the background doesn't keep loading:

<script>
  const timer = setInterval(() => {
    if (document.visibilityState === 'visible') location.reload();
  }, 30000); // milliseconds
</script>

JavaScript counts in milliseconds, so 30 seconds is 30000. To stop the refresh, for example after the visitor starts typing, call clearInterval(timer). The script must be in the page's own code. Pasted into the browser console, it stops after the first reload; our guide to auto refresh in Chrome without an extension explains why and gives a console version.

How to Refresh Part of a Page Without Flicker

A full reload blanks the page for a moment and sends the reader back to the top. To avoid that, fetch only the part that changes. This is the usual answer to "How do I auto refresh the content of the page when something changes?":

<div id="scores">Loading…</div>
<script>
  async function update() {
    const res = await fetch('/scores.html', { cache: 'no-store' });
    document.getElementById('scores').innerHTML = await res.text();
  }
  update();
  setInterval(update, 30000);
</script>

Only load HTML from your own server this way. To refresh just an image, such as a webcam snapshot, add a changing number to its address so the browser doesn't reuse the cached copy:

setInterval(() => {
  const img = document.getElementById('cam');
  img.src = img.src.split('?')[0] + '?t=' + Date.now();
}, 10000);

How to Auto Reload HTML While You Edit It in VS Code

Don't add a refresh tag for this. Install Live Server, a free VS Code extension by Ritwick Dey. Its Marketplace page describes it as a "development local Server with live reload feature". Click Go Live in the status bar, or right-click an HTML file and choose Open with Live Server. The browser then reloads each time you save.

Is Meta Refresh Bad for Accessibility or SEO?

It can be, if the interval is short. MDN warns that screen reader users "may be unable to read through and understand the page's content" before the page refreshes or redirects. A timed reload can also wipe out what someone was typing in a form. It's one reason people ask why some websites refresh automatically. Keep these rules in mind:

• Use the longest interval that still keeps the page useful.
• Don't put a refresh on pages with forms.
• For dashboards and live data, update part of the page instead of reloading all of it.
• For pages that have moved, use a server-side redirect, not a delayed meta refresh.

Can't Edit the Page? Auto Refresh It From Your Browser

You can only add a meta refresh tag to pages you control. To refresh any website on a timer, use Auto Refresh Page, a free extension for Chrome, Edge and Firefox. Add it from the Chrome Web Store, open the page, click the icon, choose 5 Seconds or another preset, and click Save. The shortest interval is 1 second and the longest is 24 hours.

Auto Refresh

English 

Running 

Time Interval

Refresh List

Detect Keyword

URL

https://www.example.com/

Presets 

✓ 5 Seconds

10 Seconds

15 Seconds

5 Minutes

10 Minutes

15 Minutes

Add custom time 

+ Custom Time

Save

For the full setup, see how to set up auto refresh in Chrome or auto refresh a web page in Chrome, Firefox and Edge. To be alerted when a word appears on someone else's page, use keyword detection (Premium).

Conclusion

One meta refresh tag in the <head> is all HTML needs to refresh a page, and JavaScript adds control and flicker-free updates. For pages you don't own, browse the Auto Refresh Page features.