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 a Web Page to another URL?
Page redirection is a technique where visitors clicking on a URL are automatically directed to a different page than originally intended. This happens seamlessly in the background and is commonly used for moving content, temporary maintenance pages, or directing users to updated URLs.
To redirect from an HTML page, use the meta tag with the http-equiv attribute. This attribute provides an HTTP header for the value of the content attribute, which specifies the number of seconds to wait before redirecting and the destination URL.
Syntax
Following is the syntax for HTML page redirection using the meta tag −
<meta http-equiv="refresh" content="seconds; url=destination-url">
Where −
- seconds − The delay time in seconds before redirection occurs
- destination-url − The target URL where users will be redirected
Set the content attribute to 0 if you want the page to redirect immediately without any delay.
Redirect After Delay
The most common approach is to redirect after a few seconds, giving users time to read a message or notice the redirection is happening.
Example
Following example redirects the current page to another website after 3 seconds −
<!DOCTYPE html> <html> <head> <title>HTML Page Redirection</title> <meta http-equiv="refresh" content="3; url=https://www.tutorialspoint.com"> </head> <body style="font-family: Arial, sans-serif; text-align: center; padding: 50px;"> <h2>Redirecting to TutorialsPoint</h2> <p>You will be redirected to TutorialsPoint in 3 seconds...</p> <p>If you are not redirected automatically, <a href="https://www.tutorialspoint.com">click here</a>.</p> </body> </html>
The page displays a message for 3 seconds before automatically redirecting to TutorialsPoint. It also provides a manual link as a fallback.
Immediate Redirect
For instant redirection without showing any content to users, set the delay to 0 seconds.
Example
Following example demonstrates immediate redirection −
<!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;"> <p>Redirecting immediately...</p> </body> </html>
This page redirects instantly to TutorialsPoint without any visible delay.
JavaScript Alternative
While the meta tag approach works universally, JavaScript provides more control over redirection timing and conditions.
Example
Following example uses JavaScript to redirect after 2 seconds with a countdown −
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Redirect</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 50px;">
<h2>JavaScript Redirection</h2>
<p>Redirecting in <span id="countdown">3</span> seconds...</p>
<button onclick="redirectNow()">Redirect Now</button>
<script>
let seconds = 3;
let countdownElement = document.getElementById("countdown");
let timer = setInterval(function() {
seconds--;
countdownElement.textContent = seconds;
if (seconds <= 0) {
clearInterval(timer);
window.location.href = "https://www.tutorialspoint.com";
}
}, 1000);
function redirectNow() {
clearInterval(timer);
window.location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
This example shows a live countdown and provides a button for immediate redirection. The timer updates every second until reaching zero.
JavaScript Redirection Redirecting in 3 seconds... [Redirect Now] (Counter decreases: 3, 2, 1, then redirects)
Common Use Cases
HTML page redirection is commonly used in the following scenarios −
- Website migration − Redirecting old URLs to new domain or page structure
- Maintenance pages − Temporary redirect during website updates
- Mobile detection − Directing mobile users to mobile-optimized pages
- A/B testing − Redirecting users to different versions for testing
- URL shortening − Redirect from short URLs to full destination URLs
Comparison
| Method | Delay Control | JavaScript Required | User Interaction | SEO Impact |
|---|---|---|---|---|
| Meta Tag | Fixed delay only | No | None | Temporary redirect (302) |
| JavaScript | Dynamic control | Yes | Buttons, events | Same as meta tag |
| Server-side (301/302) | Immediate | No | None | Permanent (301) or temporary (302) |
Conclusion
HTML page redirection can be achieved using the meta tag with http-equiv="refresh" for simple scenarios, or JavaScript for more dynamic control. The meta tag method works universally without requiring JavaScript, making it ideal for basic redirection needs. For interactive features like countdown timers or conditional redirects, JavaScript provides better flexibility and user experience.
46K+ Views
