What is meta refresh tag in html

HtmlConceptBeginner · 3 min read

Meta Refresh Tag in HTML: What It Is and How It Works

The <meta http-equiv="refresh"> tag in HTML automatically reloads or redirects a web page after a set time. It tells the browser to refresh the page or go to a new URL after a specified number of seconds.

⚙️

How It Works

The meta refresh tag works like a timer inside your web page. When the page loads, the browser reads this tag and waits for the number of seconds you set. After that time passes, the browser either reloads the same page or moves to a new page if you provide a URL.

Think of it like setting an alarm clock that rings after a few seconds. When it rings, you either wake up to the same room (reload the page) or move to a different room (redirect to another page). This happens automatically without the user clicking anything.

💻

Example

This example shows a page that refreshes itself every 5 seconds.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content="5">
  <title>Meta Refresh Example</title>
</head>
<body>
  <h1>This page will refresh every 5 seconds.</h1>
  <p>Watch the page reload automatically.</p>
</body>
</html>

Output

A simple webpage with a heading and paragraph that reloads itself every 5 seconds.

🎯

When to Use

The meta refresh tag is useful when you want to update a page automatically, like showing live scores or news updates without user action. It can also redirect users after a delay, such as sending them to a new page after a form submission or a logout.

However, it is best to use it sparingly because automatic refreshes can annoy users or cause accessibility issues. For more control and better user experience, JavaScript or server-side redirects are often preferred.

✅

Key Points

The meta refresh tag sets a timer to reload or redirect a page.
It uses the http-equiv="refresh" attribute with a content value for seconds and optional URL.
Commonly used for simple auto-refresh or delayed redirects.
Not recommended for complex or frequent updates due to user experience concerns.

✅

Key Takeaways

The meta refresh tag automatically reloads or redirects a page after a set time.

It uses http-equiv="refresh" with a content attribute specifying seconds and optional URL.

Ideal for simple auto-refresh or delayed redirects but can annoy users if overused.

Better alternatives for complex needs include JavaScript or server-side redirects.

Always consider user experience and accessibility before using meta refresh.