You might have seen webpages that refresh automatically after a certain interval of time or webpages that will redirect you to a new page. The most common and easy way to accomplish this is using HTML Meta refresh tag. Let us quickly see how to use Meta refresh tag in a HTML page.

This is a simple HTML technique and doesn’t require much of programming expertise so do not panic :-)

HTML Meta Refresh Tag Syntax

The meta tags go into the head section of your HTML page, below is the syntax for Meta refresh tag

HTML Meta Refresh Tag Syntax

<meta http-equiv=”refresh” content=”5;url=http://www.articpost.com” />

HTML Meta Refresh Tag Example

Now let us quickly see how this Meta refresh tag is used in a HTML page.

  • Open your favorite text editor and paste the below HTML code:

<html>
<head>
<title>html refresh using meta tag</title>
<meta http-equiv=”refresh” content=”5;url=http://www.articpost.com” />
</head>
<body>
<!– Your actual content goes here –>
<h2>
<script type=”text/javascript”>
var currentTime = new Date();
var hours = currentTime.getHours();
var mins= currentTime.getMinutes();
var secs = currentTime.getSeconds();
document.write(“Current Time: “+hours + “:” + mins + “:” + secs);
</script>
</h2>
</body>
</html>

  • Now Create a new folder called LearnMetaTag in your desktop and save the file as MetaRefreshTag.html
  • Now open the saved MetaRefreshTag.html file in your favorite browser.
  • After 5 seconds you will be automatically redirected to Artic Post website. Try removing just theĀ url=http://www.articpost.com from the meta tag and you should see the page just refreshes itself with the current updated time.
  • You can also redirect to another HTML page within your server instead of a website, for example create another simple HTML file called WelcomePage.html with the below contents,

<html>
<head>
<title>html refresh – new page</title>
<meta http-equiv=”refresh” content=”5;” />
</head>
<body>
<!– Your actual content goes here –>
<h2>
Welcome to the new page!!!
</h2>
</body>
</html>

  • Save the file inside the same LearnMetaTag folder
  • Now simply change the below line in MetaRefreshTag.html:

<meta http-equiv=”refresh” content=”5;url=http://www.articpost.com” />

(as)

<meta http-equiv=”refresh” content=”5;url=WelcomePage.html” />

You should now see that you are automatically redirected to the new HTML page that you have created.

So simple isn’t it? Can you now automatically redirect back to your MetaRefreshTag.html from WelcomePage.html? I will leave that to you, do try it out and let me know how it went.

This article is targeted for both technical and non-technical audience, so if you find it difficult to understand, please do leave a comment. Found it useful? Do spread the knowledge.