Question
How to Redirect One HTML Page to Another on Load in HTML and JavaScript
Question
Is it possible to create a basic HTML page that automatically redirects to another page as soon as it loads? If so, what is the usual way to do that?
For example, a simple page might look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
</head>
<body>
<p>Redirecting to another page...</p>
</body>
</html>
How can this page send the user to a different URL immediately after loading?
Short Answer
By the end of this page, you will understand how page redirection works in the browser, how to redirect from one page to another on load, and when to use HTML meta refresh versus JavaScript-based redirects.
Concept
When a browser loads a page, that page can instruct the browser to navigate somewhere else. This is called a redirect.
There are several ways to redirect a user:
- Server-side redirect using HTTP status codes like
301or302 - HTML-based redirect using a meta refresh tag
- JavaScript redirect using
window.location
For a basic HTML page, the two most common client-side options are:
- Meta refresh in the
<head> - JavaScript redirect when the page loads
Why this matters:
- You may move a page to a new URL
- You may want a landing page to forward users somewhere else
- You may need to send users after login or logout
- You may temporarily route traffic while updating a site
In real applications, server-side redirects are usually preferred because they are faster, clearer for search engines, and work even if JavaScript is disabled. But if you only control the HTML page itself, client-side redirection is often the practical solution.
Mental Model
Think of a web page like a reception desk.
- The browser arrives at the page
- The page checks its instructions
- If it finds a redirect instruction, it says: "You actually need to go to this other room"
- The browser then leaves the current page and opens the new one
A meta refresh is like a printed sign at the desk. A JavaScript redirect is like the receptionist actively telling the visitor where to go.
Syntax and Examples
1. HTML meta refresh redirect
This is the simplest HTML-only method:
<!DOCTYPE html>
<html>
<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>
How it works
http-equiv="refresh"tells the browser to refresh or navigatecontent="0; url=..."means:- wait
0seconds - then go to the given URL
- wait
You can change 0 to another number if you want a delay.
Step by Step Execution
Consider this example:
<!DOCTYPE html>
<html>
<head>
<title>Redirect Example</title>
</head>
<body>
<p>Redirecting...</p>
<script>
window.location.replace("next-page.html");
</script>
</body>
</html>
Here is what happens step by step:
- The browser opens this HTML file.
- It reads the
<head>section. - It starts building the page body.
- The text
Redirecting...is prepared for display. - The browser reaches the
<script>tag. - JavaScript runs immediately.
window.location.replace("next-page.html")tells the browser to navigate tonext-page.html.
Real World Use Cases
Common uses for redirects
- Moved pages: send visitors from an old URL to a new one
- Login flows: send users to a dashboard after signing in
- Logout flows: send users back to a home page or login screen
- Temporary maintenance pages: route users while content is being updated
- Campaign pages: redirect a short marketing URL to a full landing page
- File or documentation relocation: forward old links to updated docs
Example scenarios
Old page moved
<meta http-equiv="refresh" content="0; url=/new-about.html">
Redirect after a check
<script>
const isLoggedIn = true;
if (isLoggedIn) {
window.location.href = "/dashboard";
}
</script>
Redirect mobile users
<script>
if (.(navigator.)) {
.. = ;
}
Real Codebase Usage
In real projects, developers usually choose redirects based on control and purpose.
Common patterns
1. Server redirect for permanent or official URL changes
Used when:
- a route has moved
- SEO matters
- the redirect should work before any page loads
Examples include HTTP 301, 302, 307, and 308 responses.
2. JavaScript redirect after validation or logic
Used when the destination depends on application state.
<script>
const hasAccess = false;
if (!hasAccess) {
window.location.replace("/login");
}
</script>
This is a form of guard clause: if a condition fails, redirect early.
3. Redirect after form success
<script>
function handleSuccess() {
.. = ;
}
Common Mistakes
1. Using only JavaScript when a server redirect would be better
Broken approach for a moved page:
<script>
window.location.href = "/new-page";
</script>
This works, but for permanent URL changes a server redirect is usually better.
2. Forgetting the URL in a meta refresh tag
Broken code:
<meta http-equiv="refresh" content="0">
This refreshes the same page instead of redirecting.
Correct version:
<meta http-equiv="refresh" content="0; url=/new-page.html">
3. Putting an invalid JavaScript redirect statement
Broken code:
<script>
Comparisons
| Method | Works without JavaScript | Adds browser history entry | Best for | Notes |
|---|---|---|---|---|
| Meta refresh | Yes | Usually yes | Simple HTML-only redirects | Less flexible |
window.location.href | No | Yes | Redirects triggered by code | Easy and common |
window.location.replace() | No | No | Redirect pages that should not remain in history | Good for login/logout flows |
| Server-side redirect | Yes | Browser handles navigation directly | Permanent or official route changes | Best for SEO and reliability |
Cheat Sheet
Quick syntax
Meta refresh
<meta http-equiv="refresh" content="0; url=/new-page.html">
JavaScript redirect
<script>
window.location.href = "/new-page.html";
</script>
JavaScript redirect without keeping history
<script>
window.location.replace("/new-page.html");
</script>
Rules of thumb
- Use server redirects when possible for moved pages
- Use meta refresh for a simple HTML-only redirect
- Use JavaScript when you need conditions or app logic
- Use
replace()if the user should not go back to the redirect page - Add a fallback link for safety
FAQ
Can I redirect a page using only HTML?
Yes. A meta refresh tag can redirect without JavaScript.
What is the simplest way to redirect on page load?
For HTML-only pages, use a meta refresh tag. For JavaScript-based pages, use window.location.href or window.location.replace().
Should I use meta refresh or JavaScript for redirects?
Use meta refresh for a simple static redirect. Use JavaScript when the destination depends on logic or conditions.
What is the difference between href and replace()?
href keeps the current page in browser history. replace() removes it from history.
Is a client-side redirect good for SEO?
Usually, a server-side redirect is better for SEO. Client-side redirects are useful when server control is not available.
Can I delay the redirect for a few seconds?
Yes. In a meta refresh tag, change 0 to another number like 3. In JavaScript, use setTimeout().
Why does my redirect page show briefly before moving?
Because the browser starts rendering the page before or while the redirect is processed. This is normal, especially with scripts lower in the page.
Mini Project
Description
Build a simple redirect page for an outdated documentation URL. The page should automatically send the user to the new docs page, while still showing a message and a manual link in case automatic redirection does not work.
Goal
Create a working HTML redirect page that automatically forwards users to a new URL and provides a fallback link.
Requirements
- Create a basic HTML page with a message for the user.
- Redirect the user automatically to a new page when the page loads.
- Keep the redirect page out of browser history.
- Include a clickable fallback link to the destination page.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Check If a Checkbox Is Checked with jQuery
Learn how to check whether a checkbox is checked in jQuery using the correct selector, with examples, mistakes, and practical patterns.
Convert HTML and CSS to PDF in PHP: Options, Limits, and Practical Approaches
Learn how HTML-to-PDF conversion works in PHP, why CSS support varies, and how to choose a practical approach for Linux web servers.