The HTML http-equiv attribute
The HTML http-equiv attribute turns a <meta> tag into a pragma directive. The browser acts on that instruction using the value in content. The HTML Standard's conforming values are content-type, default-style, refresh, x-ua-compatible and content-security-policy.
Overview
The http-equiv attribute makes a <meta> element a pragma directive. The keyword in http-equiv names the directive, and the content attribute supplies its value, as in <meta http-equiv="refresh" content="30">.
The name suggests an HTTP header, but the HTML Standard calls that a historical accident. Only refresh has the same processing model as its header, and every other standardized directive behaves at least slightly differently from the header with the same name.
Each value does one job. content-type is an alternative way to declare UTF-8, refresh reloads or redirects after a delay, content-security-policy applies a CSP to the page, and default-style picks the preferred style sheet set. x-ua-compatible only ever mattered to Internet Explorer, and its value must be IE=edge.
Other values are best left out. content-language and set-cookie are non-conforming, and browsers must ignore set-cookie. Values such as pragma, expires or cache-control are not defined by the HTML Standard at all, so caching rules belong in real HTTP headers.
A CSP set this way is weaker than the header. It only counts when the meta tag is a child of <head>, it cannot use frame-ancestors, report-uri or sandbox, and resources fetched before the tag is parsed are not guaranteed to be blocked.
Syntax
<meta http-equiv="refresh" content="0; url=https://example.com/new-page">
<meta http-equiv="content-security-policy" content="default-src 'self'">Values
| Value |
|---|
| content-type | default-style | refresh | content-security-policy | x-ua-compatible |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="script-src 'none'">
<title>CSP from a meta tag</title>
</head>
<body>
<p id="status">The policy blocked the inline script, so this text never changed.</p>
<script>
document.getElementById('status').textContent = 'The script ran, so no policy applied.';
</script>
</body>
</html>Best practices
- Prefer real HTTP headers for Content Security Policy and caching, and use
http-equivonly when you cannot change the server's headers. - Use a delay of 0 for a meta refresh redirect, as in
content="0; url=/new-page", since W3C technique H76 says a zero delay avoids showing content before the new page loads. - Place a CSP meta tag as early as possible in <head>, because resources fetched before it is parsed are not guaranteed to be blocked.
- Delete
x-ua-compatible,set-cookieand cache-relatedhttp-equivtags from old templates. The HTML Standard tells browsers to ignore the first two and defines nothing for the rest. - Declare the encoding with charset rather than
http-equiv="content-type", and never use both on one page.
Accessibility
Timed refreshes and redirects can pull a page away before people finish reading it. W3C technique H76 describes meta refresh as an instant redirect with a delay of 0 and lists it as sufficient for WCAG success criterion 3.2.5 when used with G110. It also links to a documented failure for meta refresh with a time-out.
MDN's http-equiv reference flags the risk for screen reader users and people with low vision, since abrupt page updates can be disorienting. Keep automatic refreshes out of pages people need to read.