How to redirect one HTML page to another on load ?

To redirect an HTML page to another URL automatically when it loads, you can use one of these client-side methods:

1. HTML Meta Refresh (No JavaScript)

Add this <meta> tag in the <head> section of your HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="refresh" content="0; url='https://example.com/new-page'" />
  </head>
  <body>
    <!-- Optional: Fallback message if redirect fails -->
    <p>Redirecting... <a href="https://example.com/new-page">Click here</a> if not redirected.</p>
  </body>
</html>

content="0": Delay in seconds (0 for immediate redirect).
Pros: Works without JavaScript.
Cons: Not SEO-friendly; some browsers show a brief flash of the original page.

2. JavaScript Redirect

Use window.location in a <script> tag (place in <head> or <body>):

<script>
  // Redirect immediately
  window.location.href = "https://example.com/new-page";

  // OR (replaces current history entry)
  window.location.replace("https://example.com/new-page");
</script>

Pros: Faster than meta refresh; no browser flash.
Cons: Requires JavaScript to be enabled.

3. Server-Side Redirect (Recommended for SEO)

For better SEO and performance, use server-side redirects:

Apache (`.htaccess`):

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

PHP:

<?php
  header("Location: https://example.com/new-page", true, 301);
  exit();
?>

Node.js (Express):

app.get("/old-page", (req, res) => {
  res.redirect(301, "https://example.com/new-page");
});

HTTP 301: Permanent redirect (SEO-friendly).
HTTP 302: Temporary redirect.

Key Considerations

SEO: Prefer 301 server-side redirects to preserve search engine rankings.
Accessibility: Include a manual link in case redirects fail.
Performance: Client-side redirects add latency; server-side is faster.

Choose the method based on your use case and technical setup!