How do I create a redirect in HTML?

How to Redirect a Page to Another Page in HTML http-equiv=“refresh” tells the browser to redirect the page. content=“3; tells the browser how many seconds to wait before refreshing the page. In this example, it's three seconds. To make it an instant redirect, set it to “0.” Jul 24, 2023

How do you send a redirect in HTML?

The simplest way to redirect to another URL is to use an HTML <meta> tag with the http-equiv parameter set to “refresh” . The content attribute sets the delay before the browser redirects the user to the new web page. To redirect immediately, set this parameter to “0” seconds for the content attribute.

How to redirect HTML page to another HTML page using button?

In HTML, to make a button lead to another page, we wrap the <button> tag within an <a> tag . The <a> tag stands for "anchor" and it's the tag used to create links. The href attribute of the <a> tag is used to specify the destination URL.

How do I forward a website in HTML?

With one line of HTML code you can redirect visitors to another URL or page. Similarly to other meta tags, you need to place the meta refresh element in the <head>-section of a page , and it contains a parameter to instruct a browser to load another URL (refresh the page) after a certain number of seconds.

How does HTML redirect work?

An HTML redirect happens when a user enters a URL, but it changes, and the browser directs them to a different web page .

What is the HTTP code for redirect?

The HTTP response status code 302 Found is a common way of performing URL redirection. The HTTP/1.0 specification (RFC 1945) initially defined this code, and gave it the description phrase "Moved Temporarily" rather than "Found".

What is an example of redirect URL?

For example, the URL "https://wikipedia.com" (with "*.com" as domain) is first redirected to https://www.wikipedia.org/ (with domain name in . org) , where you can navigate to the language-specific site.

How do HTTP redirects work?

In HTTP, redirection is triggered by a server sending a special redirect response to a request . Redirect responses have status codes that start with 3 , and a Location header holding the URL to redirect to. When browsers receive a redirect, they immediately load the new URL provided in the Location header.

How do I redirect to a specific part of a page in HTML?

Method 1: Using HTML One can use the anchor tag to redirect to a particular section on the same page . You need to add an “id attribute” to the section you want to show and use the same id in the href attribute with “#” in the anchor tag.

How do I create a 301 redirect in HTML?

To 301 Redirect a Single Page: html with the file name of the page you want to be redirected. If the file is not in the top-level of the directory, then include the file path in front of the /old-file. html. Replace http://www.domain.com/new-file.html with the URL you want the page redirected to.

How to Set Up an HTML Redirect on Your Website (2024)

If you make frequent updates to your business website, you’re probably familiar with redirecting. A redirect essentially tells the user’s browser, “Hey, the content you’re looking for isn’t at this URL. But don’t worry, we’ll send you to the right place.”

While it’s best to avoid redirecting when possible, most site owners usually need to at some point, whether it’s relocating a page, rearranging website structure, moving domains, or updating URLs from HTTP to HTTPs. Proper redirecting ensures that both visitors and search engines don’t run into dead-end 404 pages, which can hurt your user experience and SEO rankings in one blow.

Whatever your reasons for redirection, there are a few ways to go about it. In this post, you’ll learn one common method, the HTML redirect. We’ll discuss what an HTML redirect is and how to add them to your website, even if you don’t have in-depth knowledge of HTML. We'll also look at some alternative methods for better accessibility. Let’s get started.

What is an HTML redirect?

An HTML redirect (also sometimes called a meta refresh or meta redirect) is a way of redirecting one HTML page to another in the HTML source code. An HTML redirect includes instructions in the <head> section of the document that tell the web browser to automatically refresh a different page, with an optional time delay before the refresh occurs.

HTML redirects are the simplest way to redirect a URL. They only involve a small modification to the source code of the old HTML page, and can be made easily and quickly. A HTML redirect will send both human users and search engines to the page you want them to see.

Additionally, an HTML redirect lets you set a delay time (in seconds) before the user or search engine bot is sent to the new page. This delay comes in handy if you want to display a brief message before the redirection occurs.

How to Redirect to Another Page in HTML

To redirect one HTML page to another page, you need to add a <meta> tag inside the <head> section of the old HTML page. The <head> section of an HTML document contains metadata that is useful for the browser, but invisible to users viewing the page.

The syntax for this <meta> tag is as follows:

Complete SEO Starter Pack

An introductory kit to optimize your website for search.

Increase your organic traffic.
Plan your keyword strategy.
Debunk SEO myths.
Build a blog strategy.

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

If you want to instantly send users to the new web pages, simply set your delay time to 0. However, there may be instances when you want to set a delay before redirecting. The most common reason is to inform users that the current page no longer exists and that they will be redirected soon. This message usually includes a link to send users to the new page if they are not redirected within a set amount of time.

If a visitor is using an older web browser, it’s also possible that the <meta> tag will not be read properly and the redirect will not occur. If this happens, setting a delay allows the user to click the hyperlink on the old page and be sent to the new page.

This video explains all of these steps in more detail.

Redirect HTML Code Example

Now, let’s look at a code example for an HTML redirect to better understand how they work.

Here’s the code for an HTML page that redirects users to hubspot.com after a delay of three seconds. Note that the <meta> tag is placed inside the <head> of the document.

<!DOCTYPE html> <html> <head> <title>Old Page</title> <meta charset="UTF-8" /> <meta http-equiv="refresh" content="3; URL=https://www.hubspot.com/" /> </head> <body> <p>This page has been moved. If you are not redirected within 3 seconds, click <a href="https://www.hubspot.com/">here</a> to go to the HubSpot homepage.</p> </body> </html>

This code is a good example of how to write an HTML redirect for a couple of reasons. First, the delay is short enough to not cause too much disruption to the user experience while still providing most users enough time to read the message on-screen.

Second, the message gives users the option to go to the new page immediately. It also gives users an out if the HTML refresh does not work due to browser incompatibility — these visitors can simply click the anchor link to go to the new page.

HTML Redirect Issues and Alternatives

While HTML redirects are the simplest way to implement a redirect, they also present accessibility issues. Some older browsers will not render the <meta> tag properly, which results in the old page flashing on-screen before the new page loads (even if you set a delay longer than 0), or the page not refreshing at all.

If you foresee this being a problem for many users, you can set the delay time to 0 and, in case the browser does not automatically load the new page, include an anchor link to the new page in the <body> section as shown in the example above.

To avoid these problems, consider using another redirect method on your website. The most common redirect method today is an HTTP redirect. HTTP redirects are configured on the server hosting the website, and can be either a 301 (permanent) redirect or a 302 (temporary) redirect.

See our guide to setting up 301 redirects for more help here — your process will depend on what specific technologies you use to power your website. For example, if you run a WordPress website, your best bet is to use a WordPress redirect plugin, which will take care of the back-end stuff for you and allows you to manage and track all redirects on your site from your dashboard.

JavaScript redirects are another common alternative, although this requires some knowledge of JavaScript programming and likely more trial-and-error to get right. To learn more about JavaScript redirects, you can refer to this beginner’s tutorial.

HTML Redirects: Send users to the right place.

For situations when you quickly need to direct users from one page to another, HTML redirects come in handy and are a great tool for any website owner to have in their back pocket.

However, this kind of redirect probably shouldn’t be your go-to every time. It’s often better for all users to implement a standard HTTP 301 (permanent) redirect. When in doubt, reach out to your platform support team to get their opinion on what’s best for your users and your SEO.

Topics: HTML