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 deploy a .NET app using Docker
Best Visual Studio Code Extensions for 2022
How to deploy a Deno app using Docker
Getting Started with Deno
How to deploy an Express app using Docker
Getting Started with Sass
Getting Started with Handlebars.js
Getting User Location using JavaScript's Geolocation API
Getting Started with Moment.js
Setting Up Stylus CSS Preprocessor
Using Axios to Pull Data from a REST API