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!
Getting Started with Svelte
How to Serve Static Files with Nginx and Docker
How to Set Up Cron Jobs in Linux
How to deploy a PHP app using Docker
Getting Started with Deno
Using Puppeteer and Jest for End-to-End Testing
Getting User Location using JavaScript's Geolocation API
Learn how to build a Slack Bot using Node.js
Creating a Twitter bot with Node.js
Getting Started with React
Getting Started with Vuex: Managing State in Vue
Setting Up a Local Web Server using Node.js
