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 TypeScript
Managing PHP Dependencies with Composer
Getting Started with Svelte
Getting Started with Electron
How to Set Up Cron Jobs in Linux
How to deploy a .NET app using Docker
How to deploy an Express app using Docker
How to deploy a Node app using Docker
Learn how to use v-model with a custom Vue component
Using Puppeteer and Jest for End-to-End Testing
How to Scrape the Web using Node.js and Puppeteer
Creating a Twitter bot with Node.js