How to Redirect a Web Page in HTML
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