HTML Meta Refresh: Reload or Redirect a Page
The HTML meta refresh instruction can reload the current page after a number of seconds or redirect the browser to another URL. It is placed inside the document's <head>.
<meta http-equiv="refresh" content="15">This example reloads the page 15 seconds after it has finished loading.
Meta Refresh Syntax Top ↑
For a reload, the content value is the delay in seconds:
<head>
<meta http-equiv="refresh" content="15">
</head>A value of 15 means the browser reloads the current document after 15 seconds. The timer begins after the page has loaded.
Redirecting to Another URL Top ↑
Add url= after the delay when the browser should navigate to another page:
<meta http-equiv="refresh" content="0; url=https://example.com/new-page">The example redirects immediately. If a client-side meta redirect is genuinely necessary, an immediate redirect is generally preferable to displaying content and then moving the visitor after an arbitrary delay.
Meta Refresh vs Server-Side Redirect Top ↑
A server-side redirect sends the redirect response before the old HTML page is rendered. That makes it the better choice for a URL that has permanently or temporarily moved.
For example, PHP can send an HTTP redirect:
<?php
header('Location: https://example.com/new-page', true, 301);
exit;
Learn more in the existing PHP header redirect tutorial.
User-Controlled Page Refresh Top ↑
If visitors only need an easy way to fetch the latest version of the current page, a user-controlled button avoids forcing an automatic reload.
<button type="button" onclick="location.reload()">Refresh this page</button>location.reload() requests the current page again. For production interfaces, keep behavior in JavaScript rather than inline event attributes when practical, but the compact example above shows the browser method directly.
JavaScript Refresh and Redirect Top ↑
JavaScript can schedule navigation when an application genuinely needs logic around the timing:
setTimeout(() => {
window.location.href = 'https://example.com/';
}, 5000);JavaScript provides more application control, but an automatic JavaScript redirect or reload can create the same accessibility and UX problems as a timed meta refresh. It is not automatically a better choice merely because JavaScript is used.
Accessibility and UX Top ↑
- Avoid unexpected timed changes: users may still be reading, typing, or navigating when a refresh occurs.
- Prefer user control: a clearly labelled refresh button is often easier to understand.
- Do not use delayed redirects as a countdown page by default: the automatic change of context can be disorienting.
- Preserve user input: automatic reloads can discard unsaved form content.
- For live information: update the relevant region rather than reloading the entire document when the application allows it.
Common Meta Refresh Mistakes Top ↑
Using meta refresh instead of an HTTP redirect Top ↑
If you control the server and the URL has moved, configure the appropriate HTTP redirect instead.
Redirecting after an arbitrary delay Top ↑
A delayed automatic redirect can interrupt users. If meta refresh is the only available redirect mechanism, an immediate redirect is generally preferable.
Reloading an entire page for one changing value Top ↑
For dashboards, scores, prices, or status displays, consider updating the changing data instead of repeatedly reloading the entire document.
Assuming JavaScript fixes the accessibility problem Top ↑
The problem is the unexpected automatic refresh or navigation, not only the technology used to trigger it.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
It tells the browser to reload the current page after a specified number of seconds or navigate to another URL when a URL is included.
Place it in the document's head section.
Use a server-side HTTP redirect when you control the server. Meta refresh is mainly a fallback when that is not possible.
It can cause accessibility problems because users may be interrupted while reading, navigating, or entering information. User-controlled updates are often preferable.
A button can call location.reload() so the visitor decides when the page should reload.
HTML Meta Tags BODY tag
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
