The http-equiv attribute is a versatile feature in HTML that lets you instruct the browser as if certain HTTP response headers were sent with the page. It is used on <meta> tags in the document <head>, paired with the content attribute that holds the header value. Common uses include character encoding hints, timed page refresh, and caching directives—though many of these are better handled by real HTTP headers or modern HTML alternatives.
Where http-equiv lives.
Legacy charset hint.
Reload or redirect.
Caching hints.
Modern alternative.
Update meta at runtime.
http-equivThe primary purpose of the http-equiv attribute is to provide document-level directives that mimic HTTP response headers. Instead of relying solely on the server, you can embed certain instructions directly in HTML so the browser knows how to interpret encoding, refresh timing, or caching behavior.
The name http-equiv means “HTTP equivalent.” Each <meta http-equiv="..." content="..."> pair tells the browser to behave as if it received a corresponding HTTP header—within the limits of what HTML meta tags can actually enforce.
Server-sent headers (via your web server or CDN) are the authoritative way to control caching, redirects, and security policies. Use http-equiv when you cannot set headers directly, but prefer proper HTTP configuration in production.
Add http-equiv and content to a <meta> element inside <head>:
<meta http-equiv="refresh" content="5;url=https://example.com"><meta> elements in the document <head> (early in the head when possible).content attribute that defines the header value.http-equiv value names the simulated header (e.g. refresh, cache-control).<meta charset="UTF-8"> over http-equiv="content-type".http-equiv with name — they serve different meta purposes.The http-equiv attribute supports several values, each simulating a different HTTP header:
Specifies the document’s MIME type and character encoding. In HTML5, use <meta charset="UTF-8"> instead:
<!-- Legacy -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Modern (recommended) -->
<meta charset="UTF-8">Reloads the page or redirects after a delay in seconds:
<!-- Reload after 5 seconds -->
<meta http-equiv="refresh" content="5">
<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5;url=https://example.com">Suggests caching behavior to the browser. Less reliable than a real HTTP Cache-Control header from the server:
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">http-equiv="X-UA-Compatible" content="IE=edge" — Legacy Internet Explorer document mode hint.http-equiv="Content-Security-Policy" — Limited CSP via meta (prefer HTTP header when possible).http-equiv="default-style" — Names the preferred alternate stylesheet.| http-equiv Value | content Example | Purpose |
|---|---|---|
content-type | text/html; charset=UTF-8 | Legacy encoding (use charset instead) |
refresh | 5;url=https://example.com | Redirect after 5 seconds |
cache-control | no-cache, no-store | Discourage caching |
X-UA-Compatible | IE=edge | Legacy IE mode |
| Element | <meta> | Only valid on meta tags |
| Modern charset | <meta charset="UTF-8"> | Preferred over content-type |
| Element | Supported? | Notes |
|---|---|---|
<meta http-equiv content> | Yes | Primary and only standard use |
<meta name content> | Uses name | Different attribute—for description, viewport, etc. |
<link>, <script> | No | http-equiv is meta-specific |
http-equiv vs name on <meta>| Attribute | Simulates / Defines | Example |
|---|---|---|
http-equiv | HTTP response header behavior | <meta http-equiv="refresh" content="5"> |
name | Document metadata by name | <meta name="description" content="..."> |
charset | Character encoding (no content needed) | <meta charset="UTF-8"> |
Character encoding, meta refresh, cache-control, combined head setup, and dynamic updates with JavaScript.
Common http-equiv meta tags (these live in <head> and are not visible on the page):
| http-equiv | content | Effect |
|---|---|---|
content-type | text/html; charset=UTF-8 | Legacy charset hint |
refresh | 5;url=https://example.com | Redirect after 5s |
cache-control | no-cache | Caching hint |
Meta tags configure browser behavior from HTML. Inspect the page source or DevTools Elements panel to see them.
Set UTF-8 encoding with the modern charset attribute (recommended) or the legacy http-equiv form:
<head>
<meta charset="UTF-8">
<!-- Legacy equivalent: -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>The browser reads the charset declaration early to decode bytes into characters. Place <meta charset="UTF-8"> within the first 1024 bytes of your HTML document for best results.
Redirect users to another URL after a specified number of seconds:
<meta http-equiv="refresh" content="5;url=https://example.com">The browser parses content="5;url=https://example.com" as “wait 5 seconds, then go to this URL.” Omit url= to reload the current page instead. Avoid short delays that surprise users.
Let’s explore a practical example using multiple http-equiv directives in one document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="refresh" content="300;url=https://example.com">
<title>Your HTML Page</title>
</head>
<body>
<!-- Your page content goes here -->
</body>
</html>In this example, UTF-8 encoding is set with the modern charset attribute, caching is discouraged via cache-control, and the page redirects to Example.com after five minutes. Use each directive only when you truly need it.
You can dynamically update the content attribute of an http-equiv meta tag using JavaScript:
<meta http-equiv="cache-control" content="no-cache">
<script>
var meta = document.querySelector("meta[http-equiv='cache-control']");
meta.content = "no-cache, no-store, must-revalidate";
</script>JavaScript changes the meta tag’s content property at runtime. Note that some directives (like charset) must be set before the parser reads the document—dynamic changes work best for tags that affect later behavior, not initial parsing.
http-equiv + content pair.
Treats meta as HTTP-equivalent directive.
Encoding, refresh timer, or cache hint.
Browser behavior shaped from HTML when headers are unavailable.
Common http-equiv values like refresh and cache-control are widely supported. The legacy content-type form works but is superseded by <meta charset>. Real HTTP headers always take precedence when both are present.
All major browsers honor common http-equiv values on <meta> elements in the document head.
Bottom line: Supported for common values; prefer meta charset and server HTTP headers where possible.
<meta charset="UTF-8"> for character encodinghttp-equiv value before using it<head>cache-control replaces server headershttp-equiv="content-type" in new HTML5 projectsThe http-equiv attribute provides a valuable way to control browser behavior directly from your HTML document by simulating HTTP response headers. Values like refresh and cache-control remain useful in specific scenarios.
For character encoding, use <meta charset="UTF-8">. For redirects, caching, and security policies, configure real HTTP headers on your server whenever you can. That gives you stronger, more predictable control over performance and user experience.
http-equivBookmark these before adding meta directives to your pages.
Used on <meta> tags.
ScopeSimulates headers
PurposeReload or redirect
ValuesModern encoding
Best practiceAuthoritative control
Production<meta> tag. The browser uses the paired content value to control encoding hints, refresh timing, caching, and other document behavior.<meta> element in the document <head>. It is not used on visible elements like <div> or <img>.<meta charset="UTF-8"> in HTML5. The http-equiv="content-type" form is legacy and unnecessary in modern documents.content="5" reloads after 5 seconds. content="5;url=https://example.com" redirects after 5 seconds. Prefer HTTP 301/302 redirects for production sites.Cache-Control headers are authoritative and apply before HTML is parsed. Meta tags are a fallback hint with limited enforcement.content attribute: meta.content = "new value". Some directives must be present before parsing begins to take full effect.Practice http-equiv meta tags and the modern charset alternative in the Try It editor.
5 people found this page helpful