How to Redirect a Web Page in HTML
Table of Contents
In this post, we will learn how to redirect a visitor to another web page in HTML automatically.
Redirect
A redirect is when a user visits a URL but is automatically redirected to another URL.
Websites use redirects for many reasons, like to make sure that a user is sent to the correct page, or when a page is accessed without authorization.
HTML Redirect
To perform an HTML redirect, we can use a meta
tag and add the http-equiv
attribute to it.
HTML<meta http-equiv="Refresh" content="0; url='https://sabe.io'" />
The value of Refresh
tells the browser that it should refresh. However, instead of refreshing the current page, we can turn this into a redirection.
The value of content
tells the browser how long it should wait before refreshing but we can add a url
to set where to redirect the user.
In this case, setting the time to 0
means that the browser should redirect the user immediately. It will send users to https://sabe.io
.
If you want to add a delay before redirecting the user, you can use the content
attribute to specify the delay.
Here is a delay of 5 seconds:
HTML<meta http-equiv="Refresh" content="5; url='https://sabe.io'" />
Here is the general syntax for an HTML redirect, just fill in your SECONDS
and URL
:
HTML<meta http-equiv="Refresh" content="SECONDS; url='URL'" />
Here is a full example of redirecting a web page using the meta
tag in HTML:
HTML<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; url='https://sabe.io'" />
</head>
<body>
<p>Visit <a href="https://sabe.io">Sabe.io</a>.</p>
</body>
</html>
Conclusion
We've seen how you can redirect a user to another web page in HTML.
Hopefully this post has been useful to you!
- Managing PHP Dependencies with Composer
- Getting Started with Svelte
- Getting Started with Electron
- How to deploy a .NET app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- How to deploy a Node app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Getting Started with Moon.js