Runnable HTML Docs: Redirect

Q: How do I redirect an HTML page to another page?

Add to the of the old page, and a normal link to the new page in the body as a fallback. If you control the server, a 301 redirect is better.

Q: How do I make a page refresh itself automatically?

Use a meta refresh with a delay and no URL: reloads the page every 30 seconds. It reloads the whole page and interrupts the reader, so for live data, updating part of the page with JavaScript is usually better.

Q: How do I redirect with JavaScript?

Use location.replace('https://example.com/new'). It replaces the current page in the history, so the back button does not return to the page that redirected. location.href = url works too but keeps the old page in the history.

Redirect with a meta refresh tag

In plain HTML, a redirect is a <meta http-equiv="refresh"> tag in the <head> of the old page:

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

The number is the delay in seconds, then a semicolon, then url= and the address to go to. 0 redirects as soon as the page loads. Here is a complete "page has moved" file. The delay is set to one hour so this preview stays put; on a real page you would use 0 or a few seconds:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

Two fallbacks make the page safe: the visible link (for anyone whose browser does not follow the refresh, and for screen reader users who want to choose), and <link rel="canonical">, which tells search engines which URL is the real one. If you change the delay to 0 here, the preview itself will leave for example.com; press Reset to get the example back.

Refresh a page automatically

Leave out the URL and the page reloads itself after the delay. content="5" reloads every 5 seconds. The first box below is a small page with that tag, so you can watch it: its load time jumps every 5 seconds, and text you type in its field is cleared by the reload. The second box keeps its clock current with JavaScript instead, and keeps your text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

A refresh loads the whole page again, so whatever the reader was doing on it is interrupted. That is acceptable for a page nobody interacts with, like a status screen on a wall. For dashboards, scores and feeds, update only the part that changes, as the second box does.

Redirect with JavaScript

When the redirect depends on something only the browser knows (the user's choice, a logged in state, a screen size), use JavaScript:

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

For a redirect, location.replace is almost always what you want. With location.href, pressing Back lands on the page that redirected, which redirects again, and the user is stuck.

Prefer a server redirect

A meta refresh or a script only runs after the browser has downloaded the old page. A server redirect answers the request with a status code and the new address, before any HTML is sent:

301 (moved permanently) or 308: the page has a new home for good. Search engines move the old URL's ranking to the new one.
302 (found) or 307: a temporary move; the old URL stays the main one.

How to set one up depends on your host. A few common forms:

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

Use a meta refresh when you cannot change the server at all, for example on a static host without redirect rules. Google treats an instant meta refresh as a permanent redirect and a delayed one as a temporary redirect, so a 0 delay is the closer match to a 301.

Timed redirects and accessibility

A redirect with a delay can move a reader away in the middle of a sentence. Accessibility guidelines (WCAG) count timed redirects as a failure; an instant redirect is fine. If you must wait, say so on the page ("You will be redirected in 10 seconds"), and always include the link so people can go at their own pace.

Common mistakes

A redirect loop. Two pages that refresh to each other bounce the reader forever. Check where the target page sends people.
A relative URL that points to the wrong place. url=new-page is resolved against the current URL, so from /docs/old it goes to /docs/new-page. Use a full path such as url=/new-page when in doubt.
No fallback link. Always add a normal link to the new page in the body.
Using location.href for redirects. The back button then leads into a redirect loop. Use location.replace.
Using meta refresh when you control the server. Configure a 301 instead; it is faster and clearer to every tool.

Frequently Asked Questions

How do I redirect an HTML page to another page?

Add <meta http-equiv="refresh" content="0; url=https://example.com/new"> to the <head> of the old page, and a normal link to the new page in the body as a fallback. If you control the server, a 301 redirect is better.

How do I redirect after 5 seconds in HTML?

Set the number before the semicolon to the delay in seconds: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Tell the reader on the page that they will be redirected, and give them a link.

How do I make a page refresh itself automatically?

Use a meta refresh with a delay and no URL: <meta http-equiv="refresh" content="30"> reloads the page every 30 seconds. It reloads the whole page and interrupts the reader, so for live data, updating part of the page with JavaScript is usually better.

Is a meta refresh redirect bad for SEO?

Google follows it: an instant meta refresh (delay 0) is treated like a permanent redirect and a delayed one like a temporary redirect. A server-side 301 is still the recommended way, because it is faster and every crawler and browser understands it.

How do I redirect with JavaScript?

Use location.replace('https://example.com/new'). It replaces the current page in the history, so the back button does not return to the page that redirected. location.href = url works too but keeps the old page in the history.

Related concepts