TL;DR – HTML redirect takes a website visitor to another site automatically.
Contents
What is an HTML Redirect?
A redirect happens when a user enters a URL, but it changes, and the browser takes them to a different one instead. Website creators rely on them when they need to change the structure of their site or the location of a particular page. Of course, you may redirect to a completely different website as well.
When working with Hypertext Transfer Protocol (HTTP), you need to have a basic understanding of its response codes. They contain three digits, first of which defines their type:
| Response code | Response type |
|---|---|
| 1xx | An information response (e.g. Processing) |
| 2xx | A successful response (e.g. OK) |
| 3xx | A redirection response (e.g. Moved Permanently) |
| 4xx | A client-side error response (e.g. Not Found) |
| 5xx | A server-side error response (e.g. Bad Gateway) |
Let’s say you closed your old website and opened a new one. If a user types a URL of the old one into their browser, it will return the response code 404 (Not Found). However, if you use an HTML redirect, the user will get either 301 (Moved Permanently) or 302 (Found). This code is invisible to the user, but the browser understands it and redirects the user to the new URL in moments.
The Syntax for HTML Redirect Code
The HTML redirect is also known as the meta refresh redirect, or simply HTML meta redirect. It allows you to choose whether you need an immediate or a delayed redirect. If you specify the delay time in seconds, the user will see the old page for exactly that long.
To make a page in HTML redirect to another page, you should follow this syntax:
<meta http-equiv="refresh" content="time; URL=new_url" />As you can see, it requires two parameters:
timerepresents the delay before the browser redirects the user to a different page. Define it in seconds, or enter a 0 if you need an immediate HTML redirect.new_urlrepresents the URL address you need to redirect your user to after the delay.
In the example below, you can see the HTML redirect code that takes the user to BitDegree’s website with a delay of five seconds:
<meta http-equiv="refresh" content="5; URL=https://www.bitdegree.org/" />Just like all meta tags, the HTML redirect code should be placed in the <head> section of the document. This way, the browser receives certain instructions that stay invisible to the user.
Why Delay a Redirect in HTML?
If you’re not sure why you should delay your HTML meta redirect, think about a chance to set a message for the user. You could inform them the page has moved, and then promptly send them to the new one.
Another important reason is the slight chance of the tag not being rendered correctly. This might happen if the user is using some ancient browser. In this case, you may add a direct link to the old page which the user might click manually if the HTML redirect code fails.
<head>
<meta http-equiv="refresh" content="5; URL=https://www.bitdegree.org/" />
</head>
<body>
<p>If you are not redirected in five seconds, <a href="https://www.bitdegree.org/">click here</a>.</p>
</body>As you can see, all you need to add a direct clickable link is a pair of anchor tags. Make sure to place it in the <body> section and not the <head> with the HTML meta redirect tag: there is no use for a clickable link that a user cannot see in the first place.
HTML Redirect: Useful Tips
- If you don’t define a new URL address for the redirect, HTML page will simply reload itself after the time specified. It can be useful when you need to refresh dynamic content.
- We’d advise you to avoid delays shorter than 3 seconds, as that makes it virtually impossible for the user to click the Back button on their browser.
- Be careful not to overuse HTML meta redirects: if your website has a ton of them, the search engines may think it contains spam and remove it from their index.
- You can also create redirects with PHP, JavaScript, Ruby on Rails, and Python Flask, as well as in the Apache, Nginx, and Lighttpd web servers.