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.

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.

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.

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

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

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

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

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

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

Comparisons

Cheat Sheet

Quick syntax

Meta refresh

JavaScript redirect

JavaScript redirect without keeping history

Rules of thumb

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

Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript

Check If a Checkbox Is Checked with jQuery

Convert HTML and CSS to PDF in PHP: Options, Limits, and Practical Approaches

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

4. Fallback message for users

Practical advice

4. Creating redirect loops

5. Not providing a fallback link

6. Confusing href and replace()

href vs replace()

Meta refresh vs JavaScript

Common edge cases

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

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

`href` vs `replace()`