How to redirect one HTML page to another on load

Learn how to redirect one html page to another on load with practical examples, diagrams, and best practices. Covers html, http-redirect, html-meta development techniques with visual explanations.
Tags:
Categories:

How to Redirect One HTML Page to Another on Load

Hero image for How to redirect one HTML page to another on load

Learn various methods to automatically redirect users from one HTML page to another, covering client-side and server-side techniques for different use cases.

Redirecting a web page means automatically sending a user from one URL to a different URL. This is a common practice for various reasons, such as moving content, consolidating websites, fixing broken links, or performing A/B testing. This article explores several methods to achieve page redirection, focusing on techniques applicable directly within HTML and through HTTP headers.

Client-Side Redirection with HTML Meta Refresh

The simplest way to redirect a page using only HTML is by employing the <meta> refresh tag. This method instructs the browser to load a new URL after a specified delay. While straightforward, it's generally not recommended for permanent redirects due to potential SEO implications and user experience issues (e.g., flickering, back button behavior).

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting...</title>
    <meta http-equiv="refresh" content="0; url=https://www.example.com/new-page.html">
</head>
<body>
    <p>If you are not redirected automatically, follow this <a href="https://www.example.com/new-page.html">link to the new page</a>.</p>
</body>
</html>

HTML Meta Refresh for immediate redirection

Client-Side Redirection with JavaScript

JavaScript offers more control over client-side redirection. It allows for conditional redirects, redirects based on user interaction, or redirects after dynamic content loading. The most common method involves modifying the window.location object.

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting with JavaScript...</title>
    <script type="text/javascript">
        window.onload = function() {
            // Redirect immediately
            window.location.href = 'https://www.example.com/new-page-js.html';

            // Or, redirect after a delay (e.g., 3 seconds)
            // setTimeout(function() {
            //     window.location.href = 'https://www.example.com/new-page-js.html';
            // }, 3000);
        };
    </script>
</head>
<body>
    <p>If you are not redirected automatically, follow this <a href="https://www.example.com/new-page-js.html">link to the new page</a>.</p>
</body>
</html>

JavaScript redirection on page load

flowchart TD
    A[User requests old-page.html] --> B{Browser loads old-page.html}
    B --> C{HTML/JS parsed}
    C --> D{Meta Refresh or JavaScript `window.location` executed}
    D --> E[Browser requests new-page.html]
    E --> F[User lands on new-page.html]

Client-side redirection process flow

For permanent and SEO-friendly redirects, server-side methods are superior. These methods send an HTTP status code (e.g., 301 Moved Permanently) to the browser, informing it that the resource has permanently moved. This is crucial for maintaining search engine rankings and ensuring proper indexing. The implementation varies depending on your web server (Apache, Nginx) or server-side language (PHP, Node.js, Python).

Apache (.htaccess)

Redirect a single page

Redirect 301 /old-page.html https://www.example.com/new-page.html

Redirect an entire directory

RedirectMatch 301 ^/old-directory/(.*)$ https://www.example.com/new-directory/$1

Nginx

server { listen 80; server_name old-domain.com;

# Permanent redirect for a specific page
location = /old-page.html {
    return 301 https://www.example.com/new-page.html;
}

# Permanent redirect for an entire domain
return 301 https://www.example.com$request_uri;

}

PHP