Learn SQL

How to Redirect to Another Page in HTML: A Simple, Effective Guide for Beginners

By Cristian G. Guasch •  Updated: 09/18/23 •  6 min read

Navigating the world of HTML can be tricky, especially when it comes to tasks like redirecting to another page. But don’t worry! I’m here to guide you through the process with a clear, step-by-step approach.

Redirection in HTML is a commonly used technique, often implemented for various reasons such as moving your site to a new address or guiding users towards updated content. This process essentially involves directing your website’s visitors from one webpage to another automatically without requiring them to click on any links. It’s done using meta tags within the HTML of your webpage.

So, whether you’re looking to update old web pages or improve user navigation on your site, understanding how redirection works in HTML is crucial. Let me walk you through how this can be achieved seamlessly and effectively.

Understanding HTML and Redirection

Diving into the world of web development, you’ve probably encountered the term HTML. But what’s it all about? Well, HTML or HyperText Markup Language is the backbone of most web pages we browse daily. It’s a markup language that structures content on the internet.

In essence, HTML uses tags to create elements such as headings, paragraphs, links and more. For instance,

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">This is a link</a>

These are some simple examples of how we use HTML in structuring web content.

Now let’s shift gears and talk about redirection. Ever clicked on a link and found yourself on an entirely different page than you expected? That’s redirection at work. It’s essentially guiding your browser from one URL to another.

So why would anyone want to use HTML for redirects? There could be multiple reasons:

But how does this magic happen? The answer lies in “meta refresh” tag in HTML:

<meta http-equiv="refresh" content="0; url=https://www.new-url.com/"/>

Here http-equiv attribute sets the HTTP header for information exchange while content attribute specifies delay before the browser actually redirects to new URL (in seconds). Zero means it happens instantly.

Nevertheless, remember that while using meta refresh tag can solve problems quickly, it isn’t always recommended due its impact on SEO performance. When possible, server-side redirects are considered best practice when it comes down to maintaining your website’s visibility in search engines.

Different Methods of Page Redirection in HTML

Diving straight into the heart of the matter, there are several methods to redirect a page in HTML. Let’s take a closer look at some of these techniques and how you can implement them.

The first one I’ll discuss is using the meta-refresh tag. It’s a method that’s been around for quite some time, yet it remains popular due to its simplicity. All you need to do is place this line of code within your <head> tag:

<meta http-equiv="refresh" content="0; URL='http://www.yoururl.com/'" />

In this instance, ‘0’ denotes the waiting time before redirection, while ‘http://www.yoururl.com/‘ should be replaced with your desired URL.

Moving on, another notable technique is through JavaScript window.location property. This method proves handy when you want more control over redirection — maybe based on user actions or specific conditions. Here’s an example:

window.location.href = "http://www.yoururl.com/";

Lastly, let’s not forget about server-side redirects like 301 (permanent) and 302 (temporary). These methods are often used for SEO purposes as they inform search engines about the change in URL and transfer link equity from the old URL to the new one.

Redirect 301 /oldpage.html http://www.yourdomain.com/newpage.html

Redirect 302 /oldpage.html http://www.yourdomain.com/newpage.html

Remember though, each method comes with its own pros and cons. While meta-refresh and JavaScript-based redirects are easy to implement, they’re not ideal for maintaining SEO rankings. On the other hand, server-side redirects are excellent for SEO but require a bit more technical know-how. Ultimately, the method you choose should align with your specific needs and objectives.

Step-by-Step Guide: How to Redirect to Another Page in HTML

Redirecting a webpage can be essential, especially when you’ve redesigned your website or want to guide visitors to another page. So, let’s dive into how you can master this skill.

First off, I’ll introduce the basic concept of redirecting in HTML. It’s essentially instructing the browser to move from one URL to another automatically. You might wonder why it’s needed? Well, for instance, if you have deleted a webpage but it still shows up in search engine results, a redirect can guide users from this obsolete page towards an updated one.

To accomplish this redirection task, we use the meta tag within the head section of our HTML document. Here’s what that looks like:

<head>
  <meta http-equiv="refresh" content="0; url=http://example.com/" />
</head>

In this example code above, ‘http-equiv’ is attribute set as “refresh”. The ‘content’ attribute defines the delay before the browser redirects – ‘0’ means no delay! Following after semicolon (;), we have our new target URL where we want our users redirected.

Now let me show you some variations on how you could use this same tag. If you wanted your page to refresh every 5 seconds instead of redirecting immediately:

<head>
  <meta http-equiv="refresh" content="5" />
</head>

In this case, only a numerical value is provided without any URL following semicolon (;). This tells the browser that it should refresh the current page every 5 seconds.

I hope these examples clarify how simple it really is to implement redirections and refreshes using HTML! Always remember that smart usage of such techniques improves user experience and keeps your website relevant and accessible.

Cristian G. Guasch

Hey! I'm Cristian Gonzalez, I created HTML Easy to help you learn HTML easily and fast.

Related articles