How to Redirect to a Webpage in HTML

  2. HowTo
  3. HTML Howtos
  4. How to Redirect to a Webpage in HTML
Nithin Krishnan Feb 02, 2024
HTML
  1. Use Meta Refresh to Redirect in HTML
  2. Use the Anchor Tag to Redirect in HTML
  3. Conclusion
How to Redirect to a Webpage in HTML

There are various HTML ways to re-route a user if a server goes down or is under maintenance. It depends upon the business requirement on what sort of redirect behavior the site should have. Handling redirects in the UI enhances the performance, as web page HTML will be the first to get rendered. Let’s start with going through HTML ways of redirecting to a different webpage.

  1. Meta Refresh
  2. Anchor Tag

Use Meta Refresh to Redirect in HTML

In HTML, we have the <meta> tag that is understood by the browser. Using this HTML tag, we can ask the browser to redirect to the mentioned page. It also allows us to program a delay if we wish to.

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

Here, a couple of parameters are included, the http-equiv and the content.

  • http-equiv: is similar to an HTTP request header, sending additional information for the browser to understand. This attribute accepts various values. The most commonly used one is the content-type that tells the browser of the type of content to expect. refresh is another value for http-equiv, which tells the browser to navigate to the link specified in the content attribute.
  • content: includes a programmable delay (in seconds) to let the user know that they are being redirected. If they wish to continue, they can or stay back without being redirected. And the URL is the link to which the navigation should be done.

Remarks

  1. This method is generally used on the base page to redirect the users before even the site loads.
  2. Based on the timing set in the meta tag, once a page is loaded, the meta refresh functionality will automatically redirect the user.
  3. The webpage that contains this code may not be accessible by the browser back button.
  4. If we do not specify a URL, the page will get reloaded.
  5. Do not overuse meta redirect tags on a page. It is counted as having spam content and may affect the reputation of search engine listings.

Use the Anchor Tag to Redirect in HTML

You may be familiar with the anchor tag in HTML. It is widely used in web pages to navigate to a sub-page or an external website. Unlike the meta refresh method, the anchor tag is static. Thus, it requires an event, a click, to invoke it. We can use the anchor tag for redirecting the user in the following ways:

<a href='https://www.delftstack.com/'>Go to Delfstack</a>
<a href='/tutorial'>Tutorials</a>
  • The first method uses the entire URL (https://www.delftstack.com/) passed as value to the href attribute of the <a> tag; this is effective if we need to leave the application and navigate to an external site. One can use the browser back button to return to the page of origin.
  • The second method is used to navigate to a page within site. In this case, we mention the intended page’s relative path (/tutorial). The browser translates this relative path as https://www.delftstack.com/tutorial.

Remarks

  1. This method is based on user interaction, a click event for navigation.
  2. One can use the Anchor tag redirect method for routing within the website or to a different website.
  3. If we do not pass any URL to the href attribute, then clicking on the anchor tag will reload the current page.

Conclusion

Depending on business requirements, it will be good to use the meta refresh method to redirect a user as soon as he lands on the maintenance site web page. It gives us the liberty to introduce a delay to display a message to the user for the re-route. Using an anchor tag is quite common if navigation is intended based on an event such as a user click.