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 Express
Getting Started with Electron
How to Serve Static Files with Nginx and Docker
Best Visual Studio Code Extensions for 2022
How to build a Discord bot using TypeScript
How to deploy a Deno app using Docker
Getting Started with Deno
Learn how to use v-model with a custom Vue component
Creating a Twitter bot with Node.js
Building a Real-Time Note-Taking App with Vue and Firebase
Getting Started with React
Setting Up Stylus CSS Preprocessor
