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 redirect from an HTML page?
Page redirection is a situation where you click a URL to reach page X, but internally you are directed to another page Y. This happens due to page redirection mechanisms. Website developers use redirection when they need to move content to a new location, restructure their site, or temporarily redirect users during maintenance.
To redirect from an HTML page, we use the META tag with the http-equiv="refresh" attribute. This provides an HTTP header that tells the browser to automatically redirect after a specified time delay.
Syntax
Following is the syntax for HTML page redirection −
<meta http-equiv="refresh" content="time; URL=new_url" />
The redirect requires two parameters −
Time − The delay in seconds before the browser redirects the user. Set to
0for immediate redirection.URL − The destination URL where the user will be redirected after the specified delay.
Immediate Redirection
For instant redirection without any delay, set the content attribute time to 0 −
<!DOCTYPE html> <html> <head> <title>Instant 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;"> <h1>Redirecting...</h1> <p>You are being redirected immediately.</p> </body> </html>
The page redirects instantly to TutorialsPoint without any visible delay.
Delayed Redirection
Following example demonstrates a 5-second delayed redirect with a countdown message −
<!DOCTYPE html>
<html>
<head>
<title>Delayed HTML 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;">
<h1>Welcome to TutorialsPoint</h1>
<p style="font-size: 18px; color: #333;">You'll be redirected to the TutorialsPoint homepage in 5 seconds.</p>
<div style="margin-top: 30px; padding: 15px; background-color: #f0f8ff; border-radius: 5px;">
<p>Please wait while we redirect you...</p>
</div>
</body>
</html>
The browser displays the welcome message for 5 seconds before automatically redirecting to the TutorialsPoint homepage.
Fallback Link for Failed Redirects
It is good practice to provide a manual link in case the automatic redirection fails due to browser compatibility issues or disabled JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Redirect with Fallback</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;">
<h1>Page Moved</h1>
<p style="font-size: 16px; margin: 20px 0;">This page has moved to a new location.</p>
<p style="font-size: 14px; color: #666;">You will be automatically redirected in 3 seconds.</p>
<p style="margin-top: 30px;">
If you are not redirected automatically,
<a href="https://www.tutorialspoint.com/" style="color: #007bff; text-decoration: none;">click here</a>.
</p>
</body>
</html>
This example provides both automatic redirection and a manual fallback link, ensuring users can navigate even if the meta refresh fails.
JavaScript-Based Redirection
For more control over the redirection process, JavaScript can be used as an alternative to meta refresh −
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Redirect</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Redirecting with JavaScript</h1>
<p id="countdown">Redirecting in 5 seconds...</p>
<button onclick="redirectNow()" style="padding: 10px 20px; font-size: 16px;">Go Now</button>
<script>
let seconds = 5;
const countdownElement = document.getElementById('countdown');
const countdown = setInterval(function() {
seconds--;
countdownElement.textContent = `Redirecting in ${seconds} seconds...`;
if (seconds <= 0) {
clearInterval(countdown);
window.location.href = 'https://www.tutorialspoint.com/';
}
}, 1000);
function redirectNow() {
clearInterval(countdown);
window.location.href = 'https://www.tutorialspoint.com/';
}
</script>
</body>
</html>
This JavaScript approach provides a live countdown and allows users to redirect immediately by clicking the button.
Common Use Cases
HTML redirection is commonly used in the following scenarios −
Website migration − Moving content from old URLs to new locations.
Temporary maintenance − Redirecting users to a maintenance page.
Mobile optimization − Directing mobile users to mobile-optimized versions.
A/B testing − Redirecting users to different page variants for testing.
Login redirects − Sending users to specific pages after authentication.
Conclusion
HTML page redirection can be implemented using the meta refresh tag with http-equiv="refresh" for simple automatic redirects, or JavaScript for more interactive control. Always provide fallback links to ensure accessibility when automatic redirection fails.
32K+ Views
