DEV Community

Howbeginners
Howbeginners

Posted on

Learn A Simple Html Trick To Refresh Redirects Instantly To Another Page

Image description
When you set up a redirect from one page to another, you usually want the redirect to happen instantly. However, if you've ever tried to set up a redirect through HTML, you may have found that it doesn't always work as smoothly as you'd like. There's actually a really simple fix for this - all you need is the meta refresh tag.

The meta refresh tag is a little piece of code that tells your web browser to reload a page after a certain amount of time. All you need to do is add the following line of code to the header of your redirected page:

<meta http-equiv="refresh" content="5;URL=https://example.com">
Enter fullscreen mode Exit fullscreen mode

This will tell your browser to reload the page every 5 seconds, and automatically redirects to the new page after 5 seconds.

And https://example.com/ the url destination where you want the page to redirect to, replace this url with your link.

If you want an instantly redirect without waiting for time, you can use this code:

<meta http-equiv="refresh" content="0; url=https://example.com/newlocation" />
Enter fullscreen mode Exit fullscreen mode

Where "0" is the number of seconds before the redirect happens and "URL" is the location of the new page. Be sure to include the https:// before the URL or else it will not work.

Where To Put The Html Meta refresh tag?

In order to add the refresh directive, you will need to add the following code between the head tags of your website:

<meta http-equiv="refresh" content="5;url=https://www.example.com">
Enter fullscreen mode Exit fullscreen mode

This code will refresh the redirects on your website every 5 seconds and send visitors to https://www.example.com. You can replace this URL with any other page on your website.

Something will look like this one:

<!doctype html>
<html>
  <head>
  <meta http-equiv="refresh" content="5; url=https://example.com/newlocation" />
  <title>Example title</title>
</head>
<body>
<!—- something here—>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Please back up your website where you want to apply new code before making any change.

That is all what I want to to share with you today.

Thanks For reading!

Follow me to read more interesting contents:

My website: www.howbeginners.com
Twitter: @wwhowbeginner
Medium: wwwhowbeginnerscom

Top comments (0)