Question

How to Redirect One HTML Page to Another on Load in HTML and JavaScript

htmlhttp-redirecthtml-meta

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 301 or 302
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.

Take Quiz

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 navigate
content="0; url=..." means:
- wait 0 seconds
- then go to the given URL

You can change 0 to another number if you want a delay.

2. JavaScript redirect on load

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Redirecting...</title>
  <script>
    window.location.href = "https://example.com/new-page.html";
  </script>
</head>
<body>
  <p>Redirecting...</p>
</body>
</html>

How it works

window.location represents the current page URL
assigning a new URL to href tells the browser to navigate there

3. JavaScript redirect after the page finishes loading

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Redirecting...</title>
</head>
<body>
  <p>Redirecting...</p>

  <script>
    window.addEventListener("load", function () {
      window.location.href = "https://example.com/new-page.html";
    });
  </script>
</body>
</html>

This waits until the page is fully loaded before redirecting.

4. Replacing history instead of adding a new entry

<script>
  window.location.replace("https://example.com/new-page.html");
</script>

This is useful if you do not want the user to press Back and return to the redirecting page.

Beginner tip

Use href if going back to the previous page is acceptable
Use replace() if the redirecting page should not stay in browser history

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 to next-page.html.
The current page is replaced by the new page.
The browser starts loading next-page.html.

Because replace() was used, the redirect page usually does not remain in browser history.

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 (/Mobi|Android/i.test(navigator.userAgent)) {
    window.location.href = "/mobile-home";
  }
</script>

Take Quiz

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() {
    window.location.href = "/thank-you";
  }
</script>

4. Fallback message for users

Even when redirecting immediately, many pages still show a message and a manual link:

<p>If you are not redirected, <a href="/new-page">click here</a>.</p>

This helps with accessibility and browser issues.

Practical advice

Prefer server-side redirects for moved pages
Use JavaScript redirects when the destination depends on code logic
Use replace() when the redirect page should not stay in history
Always consider a manual fallback link

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>
  location = /new-page.html;
</script>

The URL must be a string.

Correct version:

<script>
  window.location.href = "/new-page.html";
</script>

4. Creating redirect loops

A redirect loop happens when page A redirects to page B, and page B redirects back to page A.

Avoid this by checking your routes carefully.

5. Not providing a fallback link

Some users may need a clickable link if the redirect does not happen as expected.

Better version:

<p>Redirecting... If nothing happens, <a href="/new-page.html">click here</a>.</p>

6. Confusing `href` and `replace()`

href adds a new browser history entry
replace() replaces the current history entry

If users should not return to the redirect page, use replace().

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

`href` vs `replace()`

Option	Back button returns to old page?	Typical use
`window.location.href = "..."`	Yes	Normal navigation
`window.location.replace("...")`	No	Automatic redirects

Meta refresh vs JavaScript

Feature	Meta refresh	JavaScript
Requires scripting	No	Yes
Can use conditions	No	Yes
Easy to write	Very easy	Easy
Best for logic-based redirects	No	Yes

Take Quiz

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

Common edge cases

Relative URLs like next-page.html depend on the current folder
Absolute URLs like https://example.com/page go to a full address
Redirect loops can break navigation
JavaScript redirects will not work if scripting is disabled

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.

Related Concepts

HTTP redirects — the server-side version of redirection using status codes like 301 and 302.
window.location — the JavaScript object used to inspect and change the current URL.
Browser history — important for understanding the difference between href and replace().
Meta tags — the HTML mechanism behind meta refresh redirects.
DOMContentLoaded and load events — useful when you want to control exactly when redirect logic runs.
Relative vs absolute URLs — helps avoid broken redirect destinations.
Guard clauses — a common pattern where code redirects early when conditions are not met.

Take Quiz

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.

Take Quiz

Keep learning

How to Redirect One HTML Page to Another on Load in HTML and JavaScript

Question

Short Answer

Concept

Mental Model

Syntax and Examples

1. HTML meta refresh redirect

How it works

2. JavaScript redirect on load

How it works

3. JavaScript redirect after the page finishes loading

4. Replacing history instead of adding a new entry

Beginner tip

Step by Step Execution

Real World Use Cases

Common uses for redirects

Example scenarios

Old page moved

Redirect after a check

Redirect mobile users

Real Codebase Usage

Common patterns

1. Server redirect for permanent or official URL changes

2. JavaScript redirect after validation or logic

3. Redirect after form success

4. Fallback message for users

Practical advice

Common Mistakes

1. Using only JavaScript when a server redirect would be better

2. Forgetting the URL in a meta refresh tag

3. Putting an invalid JavaScript redirect statement

4. Creating redirect loops

5. Not providing a fallback link

6. Confusing href and replace()

Comparisons

href vs replace()

Meta refresh vs JavaScript

Cheat Sheet

Quick syntax

Meta refresh

JavaScript redirect

JavaScript redirect without keeping history

Rules of thumb

Common edge cases

FAQ

Can I redirect a page using only HTML?

What is the simplest way to redirect on page load?

Should I use meta refresh or JavaScript for redirects?

What is the difference between href and replace()?

Is a client-side redirect good for SEO?

Can I delay the redirect for a few seconds?

Why does my redirect page show briefly before moving?

Related Concepts

Mini Project

Description

Goal

Requirements

Related questions

Add a Favicon to a Static HTML Page

Allow Only Numeric Input (0-9) in HTML Input Using jQuery

Apply CSS !important with jQuery .css()

6. Confusing `href` and `replace()`

`href` vs `replace()`

What is the difference between `href` and `replace()`?