Open In App

How to redirect a page to another page in HTML ?

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Redirecting a page in HTML involves sending users to a different web page automatically or upon interaction. This can be achieved using the anchor tag's href attribute or the meta tag with the http-equiv attribute set to refresh and the content attribute specifying the time delay and destination URL. Understanding these methods helps improve navigation and user experience on your website.

Redirect to Another Page with HTML Meta Tag

HTML <meta> tag contains attributes "http-equiv" set to "refresh" and "content" specifying the time delay and the destination URL. Upon page load, the browser reads this meta tag and automatically redirects the user to the specified URL after the specified time delay.

Syntax:

<meta http-equiv = "refresh" content = " time ; url = link"/>

Example: Here is an example of using a meta tag to redirect one page to another page.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>Redirecting to Another page in HTML</title>
  <!-- Redirecting to another page using meta tag -->
  <meta http-equiv="refresh" content="5; url =https://www.geeksforgeeks.org/community/" />
</head>

<body>
  <h3>
    Redirecting to Another page in HTML
  </h3>
  <p><strong>Note:</strong> If your browser supports Refresh, you'll be
    redirected to GeeksforGeeks Homepage, in 5 seconds.
  </p>
</body>

</html>

Temporary Note on Output : On Run, The output may show a "Refuse to Connect" error due to security restrictions from the GeeksforGeeks site, which prevents embedding. To see the output, replace the src URL with one that allows iframe embedding, such as "https://www.example.com/".

Explanation:

  • In the above example we are using the <meta> tag within the <head> section of the HTML document.
  • Specifies the redirection behavior with http-equiv="refresh" attribute and a 5-second delay specified in the content attribute.
  • Informs users of the impending redirection in a centered paragraph.
  • Improves navigation by automatically redirecting users to the GeeksforGeeks homepage.

Redirect to Another Page with HTML Anchor Tag

Redirecting a page using the anchor tag involves specifying the destination URL in the href attribute. Upon clicking the anchor link, the browser navigates to the provided URL, facilitating seamless page redirection within the web application.

Syntax:

<a href = "link">Link Name </a>

Now let's understand this with the help of example:

HTML
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redirecting to GeeksforGeeks Community</title>
    <!-- Meta tag for automatic redirect after 5 seconds -->
    <meta http-equiv="refresh" content="5; url=https://www.geeksforgeeks.org/community/" />
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 100px;
            background-color: #f9f9f9;
        }

        h3 {
            color: green;
        }

        p {
            margin-top: 20px;
            font-size: 16px;
        }

        a {
            color: #007bff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h3>Redirecting to GeeksforGeeks Community</h3>
    <p>
        <strong>Note:</strong> You will be redirected to the
        <a href="https://www.geeksforgeeks.org/community/" target="_blank">GeeksforGeeks Community</a>
        in 5 seconds.
    </p>
</body>
</html>

Output:

Redirecting pages in HTML can be effectively achieved using either the meta tag or the anchor tag. The meta tag method is ideal for automatic redirection with a time delay, while the anchor tag method is useful for user-initiated navigation. Both techniques enhance the user experience by providing seamless page transitions.


How to redirect a page to another page in HTML ?

Similar Reads