How to Redirect HTML Pages
HTML redirects send visitors from one page to another. This guide shows you how to redirect an HTML page with a meta refresh tag and when to use JavaScript instead.
What you’ll build or solve
You’ll create an HTML page that sends visitors to a new URL automatically. Done means you can set up an immediate redirect, add a short delay with a fallback link, and choose the right method for a simple static page.
Learn HTML on Mimo
When this approach works best
HTML redirects work best when:
- You moved a static page and want visitors to land on the new version.
- You do not have access to server settings or
.htaccess. - You need a simple redirect for a small HTML-only website.
- You want to show a short message before sending users elsewhere.
This is a bad idea for major site migrations, SEO-sensitive redirects, or permanent URL changes on a production website. Use a server-side 301 redirect when you can control the server.
Prerequisites
- A text editor or code editor
- Basic HTML knowledge
- An existing HTML file you can edit
No server configuration is required.
Step-by-step instructions
Step 1: Add a meta refresh redirect
The simplest HTML redirect uses a <meta> tag inside the <head> section.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url=https://example.com/new-page.html">
<title>Redirecting...</title>
</head>
<body>
<p>Redirecting...</p>
</body>
</html>
The content value has two parts:
HTML
content="0; url=https://example.com/new-page.html"
The first number is the delay in seconds. The url value is the destination.
Use 0 for an immediate redirect:
HTML
<meta http-equiv="refresh" content="0; url=https://example.com/new-page.html">
Use a higher number if you want a delay:
HTML
<meta http-equiv="refresh" content="5; url=https://example.com/new-page.html">
This waits 5 seconds before redirecting.
You can also redirect to another file on the same site:
HTML
<meta http-equiv="refresh" content="0; url=contact.html">
Or to a folder path:
HTML
<meta http-equiv="refresh" content="0; url=/products/">
What to look for
- Place the redirect tag inside
<head>. - Put the delay before the semicolon.
- Put the destination after
url=. - Use a full URL for another website.
- Use a relative path for another page on the same site.
- For SEO-sensitive redirects, prefer a server-side 301 redirect.
Step 2: Add a fallback link
A fallback link helps users if the redirect does not happen. It also makes the page clearer for screen readers and visitors with unusual browser settings.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="3; url=https://example.com/new-page.html">
<title>Page Moved</title>
</head>
<body>
<p>This page has moved. You will be redirected in a few seconds.</p>
<p>
<a href="https://example.com/new-page.html">Go to the new page</a>
</p>
</body>
</html>
This pattern works well when you add a delay. For immediate redirects, the fallback link may still help if the browser blocks the redirect.
Step 3: Use JavaScript when you need history control
JavaScript can also redirect an HTML page. Use it when you need more control over browser history.
Option A, keep the previous page in browser history:
HTML
<script>
window.location.href = "https://example.com/new-page.html";
</script>
This lets users press the Back button and return to the redirect page.
Option B, replace the current page in browser history:
HTML
<script>
window.location.replace("https://example.com/new-page.html");
</script>
This prevents users from going back to the redirect page with the Back button.
A complete JavaScript redirect page looks like this:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
</head>
<body>
<p>Redirecting...</p>
<script>
window.location.replace("https://example.com/new-page.html");
</script>
</body>
</html>
Use the meta refresh method for simple HTML-only redirects. Use JavaScript when history behavior matters.
Examples you can copy
Example 1: Immediate redirect to another page
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url=about.html">
<title>Redirecting...</title>
</head>
<body>
<p>Redirecting to the About page...</p>
</body>
</html>
This sends visitors from the current file to about.html.
Example 2: Redirect with a short message
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5; url=https://example.com/support">
<title>Support Page Moved</title>
</head>
<body>
<h1>Support Page Moved</h1>
<p>Our support page has moved. You will be redirected in 5 seconds.</p>
<p>
<a href="https://example.com/support">Go to the new support page</a>
</p>
</body>
</html>
This gives users time to read the message before the redirect happens.
Example 3: JavaScript redirect without Back button loop
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
</head>
<body>
<p>Taking you to the new page...</p>
<script>
window.location.replace("/new-location/");
</script>
</body>
</html>
This replaces the current page in the browser history, so users do not keep returning to the redirect page.
Common mistakes and how to fix them
Mistake 1: Putting the meta tag in the body
What you might do:
HTML
<body>
<meta http-equiv="refresh" content="0; url=contact.html">
</body>
Why it breaks:
The browser expects metadata inside the <head> section. Some browsers may still redirect, but the HTML is not structured correctly.
Correct approach:
HTML
<head>
<meta http-equiv="refresh" content="0; url=contact.html">
</head>
Mistake 2: Forgetting the delay value
What you might do:
HTML
<meta http-equiv="refresh" content="url=contact.html">
Why it breaks:
The content attribute needs the delay first, then the URL.
Correct approach:
HTML
<meta http-equiv="refresh" content="0; url=contact.html">
Mistake 3: Using an HTML redirect for an important SEO move
What you might do:
HTML
<meta http-equiv="refresh" content="0; url=https://example.com/new-url">
Why it can cause problems: Search engines and browsers usually handle this, but server-side redirects are clearer and more reliable for permanent moves.
Correct approach: Use a 301 redirect through your server, hosting panel, CMS, or CDN when the change is permanent.
Troubleshooting
If the redirect does not happen, check that the <meta> tag is inside <head>.
If the browser shows a 404 page, check the destination URL or relative file path.
If the redirect waits too long, lower the delay number in the content attribute.
If JavaScript redirect does not work, check the browser console for script errors.
If users get stuck in a redirect loop, make sure the destination does not redirect back to the original page.
If search engines do not update the URL, use a server-side 301 redirect instead.
Quick recap
- Use
<meta http-equiv="refresh">for a simple HTML redirect. - Place the meta refresh tag inside
<head>. - Use
0for an immediate redirect. - Add a fallback link when showing a delay.
- Use
window.location.replace()when you do not want the old page in browser history. - Use server-side 301 redirects for permanent, SEO-sensitive URL changes.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot