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!
How to Install Node on Windows, macOS and Linux
Getting Started with Solid
Managing PHP Dependencies with Composer
Getting Started with Svelte
Getting Started with Express
Create an RSS Reader in Node
How to build a Discord bot using TypeScript
How to deploy a MySQL Server using Docker
Using Puppeteer and Jest for End-to-End Testing
Getting Started with Handlebars.js
Build a Real-Time Chat App with Node, Express, and Socket.io
Learn how to build a Slack Bot using Node.js
