Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to automatically redirect your visitors to your new home page?
Page redirection is a situation where you click a URL to reach a page X but are internally directed to another page Y. This happens due to page redirection setup by the website developer. HTML provides a simple way to automatically redirect visitors from one page to another using the META tag.
To redirect from an HTML page, use the META tag with the http-equiv attribute. The http-equiv attribute provides an HTTP header for the value of the content attribute. The value in the content is the number of seconds you want the page to wait before redirecting.
Through this method, you can automatically redirect your visitors to a new homepage or any other page. Set the content attribute to 0 if you want the redirection to happen immediately without any delay.
Syntax
Following is the syntax for HTML page redirection using the META tag −
<meta http-equiv="refresh" content="seconds; url=destination-url" />
Where −
- seconds − Number of seconds to wait before redirecting (0 for immediate redirect)
- destination-url − The URL where you want to redirect the user
Immediate Redirection
For instant redirection without any delay, set the content value to 0. This is useful when you have permanently moved your website to a new domain.
Example
Following example shows immediate redirection to TutorialsPoint homepage −
<!DOCTYPE html> <html> <head> <title>Immediate Redirect</title> <meta http-equiv="refresh" content="0; url=https://www.tutorialspoint.com" /> </head> <body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h2>Redirecting...</h2> <p>If you are not redirected automatically, <a href="https://www.tutorialspoint.com">click here</a>.</p> </body> </html>
This page will redirect immediately to TutorialsPoint.com without showing the content to the user.
Delayed Redirection
You can add a delay before redirection to show a message to users or give them time to read important information before being redirected.
Example − 3 Second Delay
Following example redirects after 3 seconds, giving users time to read the message −
<!DOCTYPE html> <html> <head> <title>Delayed Redirect</title> <meta http-equiv="refresh" content="3; url=https://www.tutorialspoint.com" /> </head> <body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h2>Website Moved</h2> <p>Our website has moved to a new location.</p> <p>You will be automatically redirected in 3 seconds...</p> <p>If not redirected, <a href="https://www.tutorialspoint.com">click here</a>.</p> </body> </html>
Users will see the message for 3 seconds before being redirected to the new URL.
Example − Countdown Timer with JavaScript
Following example shows a countdown timer that displays the remaining seconds before redirection −
<!DOCTYPE html>
<html>
<head>
<title>Countdown Redirect</title>
<meta http-equiv="refresh" content="5; url=https://www.tutorialspoint.com" />
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Page Moved</h2>
<p>You will be redirected in <span id="countdown">5</span> seconds.</p>
<p><a href="https://www.tutorialspoint.com">Click here to redirect now</a></p>
<script>
let timeLeft = 5;
const countdownElement = document.getElementById('countdown');
const timer = setInterval(() => {
timeLeft--;
countdownElement.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
}
}, 1000);
</script>
</body>
</html>
This example shows a live countdown from 5 to 0, updating every second before the automatic redirection occurs.
Common Use Cases
HTML page redirection is commonly used in the following scenarios −
- Website Migration − When moving to a new domain or changing URL structure
- Temporary Maintenance − Redirecting to a maintenance page
- Mobile Redirection − Redirecting mobile users to a mobile-optimized version
- Login Redirection − Redirecting users after successful login
- Thank You Pages − Redirecting from form submission to a thank you page
Browser Compatibility
The META refresh tag is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across different platforms and devices, making it a reliable method for page redirection.
Note − While META refresh is widely supported, for SEO purposes, server-side redirects (301/302 HTTP redirects) are preferred over client-side META refresh redirects when possible.
Conclusion
HTML META refresh provides a simple client-side method to automatically redirect visitors to a new page. Use content="0" for immediate redirection or specify seconds for delayed redirection. Always include a manual link as a fallback for users whose browsers may not support automatic redirection.
2K+ Views
