How to redirect to another webpage in HTML?

It is often required to redirect to another webpage on loading a webpage, for example, due to the contents being moved to the new webpage.

Demonstrated here are two simple methods to redirect to another webpage on load.

Method-1: Using http-equiv attribute of the meta tag in HTML.



Syntax:

<meta http-equiv="refresh" content="seconds; url=URL">

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Redirect to GeeksforGeeks
    </title>
    <!-- meta tag to redirect to 
     ide.geeksforgeeks.org after 2 seconds -->
    <meta http-equiv="refresh"
          content="2; 
                url=https://ide.geeksforgeeks.org/">
</head>
  
<body>
    <!-- Link to the destination page 
      in case the refresh does not work -->
    You will be redirected to GeeksforGeeks in a moment.
    <br
    If you are not redirected automatically, 
    <a href="https://ide.geeksforgeeks.org/">
      click here
    </a>.
</body>
  
</html>

chevron_right


Output:
Before:

After 2 seconds:

Note: In some older browsers, like Internet Explorer 6, refresh may cause unexpected results and impair the browser’s Back button. This is compensated for in most modern browsers (Internet Explorer 7 and higher, Google Chrome, Mozilla Firefox, Microsoft Edge).

Method-2: Using location.href in JavaScript.

Syntax:

window.location.href = "URL"

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Redirect to GeeksforGeeks
    </title>
    <script type="text/javascript">
        
        /* location.href used to
        redirect to ide.geeksforgeeks.org */
        window.location.href =
          "https://ide.geeksforgeeks.org/"
    </script>
</head>
  
<body>
    <!-- Link to the destination page in
     case the redirect does not work -->
    You will be redirected to GeeksforGeeks in a moment.
    <br>
    If you are not redirected automatically, 
    click here 
   </a>.
</body>
  
</html>

chevron_right


Output:

Note: This method works fine for any JavaScript enabled browser.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.