Web Standards
The http-equiv Difference in HTML5
How HTML5 pared down meta http-equiv, gave us the charset shorthand, and which values still earn their keep.
How HTML5 pared down meta http-equiv, gave us the charset shorthand, and which values still earn their keep.
For years, the top of every HTML document opened with an incantation nobody quite understood: a <meta http-equiv="Content-Type"> tag pretending to be an HTTP header. HTML5 looked at this ritual, kept the parts that mattered, retired the parts that didn't, and handed us a one-line shorthand for the thing we actually needed. Understanding that change is a small lesson in how the whole spec thinks.
The name says it plainly: HTTP-equivalent. A <meta http-equiv> element was designed to stand in for an HTTP response header when the server couldn't or wouldn't send one. The browser would parse the tag and behave as if the header had arrived over the wire. In HTML4 the mechanism was open-ended, and authors stuffed all sorts of headers in there with mixed results.
HTML5 narrowed the field to a defined list of pragma directives. If a value isn't on the list, it isn't conforming. The survivors are the ones that genuinely make sense to declare from inside the document.
The single most common use was declaring the character encoding. HTML5 replaced the verbose form with a dedicated attribute:
<!-- HTML4 way, still valid -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- HTML5 shorthand -->
<meta charset="utf-8">Both are conforming; the short form is the one to write. Put it within the first 1024 bytes of the document, ideally as the very first thing in <head>, so the parser doesn't have to guess and then restart. And the answer is always utf-8. There is no defensible reason to ship anything else in 2020s web content.
The pragma directives that remain conforming in HTML5 are a short, sensible list:
content-type — the encoding declaration, equivalent to <meta charset>; you may not use both to disagree.default-style — selects the preferred alternate stylesheet.refresh — the notorious auto-redirect/reload; still valid, still an accessibility hazard, use with care.x-ua-compatible — a historical wart for coaxing old Internet Explorer into a saner rendering mode.content-security-policy — the useful modern one; declares a CSP from within the document.Notably absent is Set-Cookie. HTML4 technically allowed it; HTML5 does not, and browsers were already ignoring it. The lesson is that a real HTTP header is the authoritative place for real HTTP concerns. Caching directives, cookies, content negotiation — these belong to the server response, not to a tag the parser meets halfway down the page.
A
<meta>pragma is a fallback for when you don't control the headers. When you do control them, use them.
That's the whole philosophy in miniature. HTML5 didn't ban http-equiv because it was ugly; it constrained it because most of what people crammed into it was better expressed elsewhere. Keep <meta charset="utf-8"> at the top, reach for content-security-policy when you must, and let your server do the rest. Read the current spec's pragma directives section when you need the authoritative list.